/*
Theme Name: Tsubaki
Theme URI: https://github.com/Automattic/theme-tsubaki
Author: Automattic
Author URI: https://automattic.com/
Description: Tsubaki puts the spotlight on your products and your customers.  This theme leverages WooCommerce to provide you with intuitive product navigation and the patterns you need to master digital merchandising.
Requires at least: 5.8
Tested up to: 6.2.0
Requires PHP: 7.2
Version: 1.3.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: 
Text Domain: tsubaki
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, rtl-language-support, theme-options, threaded-comments, translation-ready, wide-blocks
*//*
 * Font smoothing.
 * This is a niche setting that will not be available via Global Styles.
 * https://github.com/WordPress/gutenberg/issues/35934
 */

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

/*
 * Text and navigation link styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:hover,
a:focus {
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

a:active {
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item a:hover,
.wp-block-navigation .wp-block-navigation-item a:focus {
	text-decoration: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

.wp-block-post-title a:where(:not(.wp-element-button)):hover {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25ch;
}

/*
 * Search and File Block button styles.
 * Necessary until the following issues are resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/36444
 * https://github.com/WordPress/gutenberg/issues/27760
 */

.wp-block-search__button,
.wp-block-file .wp-block-file__button {
	background-color: var(--wp--preset--color--primary);
	border-radius: 0;
	border: none;
	color: var(--wp--preset--color--background);
	font-size: var(--wp--preset--font-size--medium);
	padding: calc(.667em + 2px) calc(1.333em + 2px);
}

/*
 * Button hover styles.
 * Necessary until the following issue is resolved in Gutenberg:
 * https://github.com/WordPress/gutenberg/issues/27075
 */

.wp-block-search__button:hover,
.wp-block-file .wp-block-file__button:hover,
.wp-block-button__link:hover {
	opacity: 0.90;
}

/* Overrides the Gutenberg styles for the outline button */
.wp-block-button.is-style-outline>.wp-block-button__link {
	border-color: currentColor;
	padding-top: calc(0.8rem - 1px);
	padding-right: calc(2.7rem - 1px);
	padding-bottom: calc(0.8rem - 1px);
	padding-left: calc(2.7rem - 1px);
}

:is(
	.is-style-outline .wp-block-button__link,
	.is-style-outline .wp-element-button,
	.wp-block-post-comments-form input[type=submit],
	.wp-block-button.is-style-outline>.wp-block-button__link, /* < - Overrides the Gutenberg styles for the outline button */
):is(
	:hover,
	:focus
) {
	opacity: 0.90;
}

:is(
	.is-style-outline .wp-block-button__link,
	.is-style-outline .wp-element-button,
	.wp-block-post-comments-form input[type=submit],
):is(
	:active
) {
	border-style: dashed;
}

/*
 * Override Twenty Twenty-Three heading style because Tsubaki doesn't use Source Serif.
 */
.woocommerce .site-main .woocommerce-products-header h1.page-title,
.woocommerce .site-main .woocommerce-page .woocommerce-thankyou-order-received,
.woocommerce .site-main .woocommerce-page h2.woocommerce-column__title {
	font-family: var(--wp--preset--font-family--system-font);
	font-weight: 700;
}

/*
 * Remove underline from product title.
 */
.wc-block-grid__product-link {
	text-decoration: none;
}

/*
 * My Account menu styling.
 */
@media screen and (min-width: 768px) {
	.woocommerce .woocommerce-MyAccount-navigation {
		width: 17.5%;
		float: left;
		margin-right: 5%;
	}
	.woocommerce .woocommerce-MyAccount-content {
		width: 76.5%;
		float: right;
	}
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li {
	padding: 0;
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--foreground);
}

.woocommerce-account .woocommerce .woocommerce-MyAccount-navigation ul li a {
	padding: calc( 1.1rem - 1px ) 0; /* Exact alignment with the table header border */
	display: block;
	text-decoration: none;
}

/* Active menu item state */
.woocommerce-account main .woocommerce .woocommerce-MyAccount-navigation li.is-active a {
	font-weight: bold;
}
.woocommerce-account main .woocommerce .woocommerce-MyAccount-navigation li.is-active a::before {
	/* Remove TT3's ">" token. */
	content: '';
}

/*
 * Form inputs & elements.
 */
.tsubaki-element-select {
	position: relative;
}
.tsubaki-element-select:after {
	position: absolute;
	content: '';
	top: 50%;
	right: 0.8rem;
	display: inline-block;
	width: 0.4rem;
	height: 0.4rem;
	transform: translateY(-50%) rotate(45deg);
	border-right: 2px solid #50575e;
	border-bottom: 2px solid #50575e;
}

.woocommerce .wp-site-blocks div.product .tsubaki-element-select select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 0;
	padding: .9rem 2rem .9em 1.1em;
	border-radius: 4px;
	border: 1px solid #50575e;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	white-space: nowrap;
	text-overflow: ellipsis;
    overflow: hidden;
}

.woocommerce-page div.product .input-text,
.woocommerce-page form .input-text {
	border: 1px solid #50575e !important;
	border-radius: 4px;
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--typography--line-height--normal);
	/* Align with buttons height. */
	padding: .8rem 1.1rem;
}

.woocommerce div.product form input[type=checkbox] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	position: relative;
	background-color: #fff;
	border: 2px solid #50575e;
	border-radius: 2px;
	box-sizing: border-box;
	font-size: 1em;
	height: 1.5em;
	margin: 0 .5em 0 0;
	min-height: 1.5em;
	min-width: 1.5em;
	overflow: hidden;
	vertical-align: middle !important; /* Important to ensure vertical alignment */
	width: 1.5em;
}

.woocommerce div.product form input[type=checkbox]:focus {
	outline: 2px solid #50575e;
	outline-offset: 2px;
}

.woocommerce div.product form input[type=checkbox]:checked {
	background: #fff;
	border-color: #50575e;
}

.woocommerce div.product form input[type=checkbox]:checked::before {
	content: "";
	position: absolute;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 20'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4L9 16.2z'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-size: contain;
}

/*
 * Thank you page styling.
 */
.woocommerce-page.woocommerce-order-received h1 + hr {
	display: none;
}
.woocommerce-page.woocommerce-order-received .woocommerce-thankyou-order-received {
	font-weight: 500;
	font-size: var(--wp--preset--font-size--x-large);
	margin-bottom: var(--wp--custom--spacing--small);
}
.woocommerce-page.woocommerce-order-received ul.woocommerce-order-overview li:last-of-type {
	margin-right: 0;
}
.woocommerce-page.woocommerce-order-received ul.woocommerce-order-overview li {
	font-weight: bold;
	padding: 0.8rem 0;
	margin: 0;
	display: block;
	margin-right: 1.5rem;
}
.woocommerce-page.woocommerce-order-received ul.woocommerce-order-overview li strong {
	display: block;
	font-weight: normal;
	margin-top: 0.8rem;
}
.woocommerce-page.woocommerce-order-received section > h2 {
	font-size: var(--wp--preset--font-size--large);
	line-height: var(--wp--custom--typography--line-height--normal);
	font-weight: 500;
	margin-bottom: var(--wp--style--block-gap);
	margin-top: var(--wp--custom--spacing--small);
}

/*
 * Tables styling.
 */
.woocommerce-page .wp-site-blocks .shop_table {
	width: 100%;
	border: 0;
}
.woocommerce-page .wp-site-blocks .shop_table td, 
.woocommerce-page .wp-site-blocks .shop_table th {
	font-size: var(--wp--preset--font-size--small);
	padding: 1.1rem 0.8rem;
	border-top: 0;
	border-bottom: 0;
}
.woocommerce-page .wp-site-blocks .shop_table tr > :first-child {
	padding-left: 0;
}
.woocommerce-page .wp-site-blocks .shop_table tr > :last-child {
	padding-right: 0;
	text-align: right;
}
.woocommerce-page .wp-site-blocks .shop_table td.product-name a {
	text-decoration: none;
}
.woocommerce-page .wp-site-blocks .shop_table th {
	text-transform: uppercase;
	font-weight: bold;
}
.woocommerce-page .wp-site-blocks .shop_table tbody > :first-child td {
	border-top: 2px solid var(--wp--preset--color--foreground);
}
.woocommerce-page .wp-site-blocks .shop_table tfoot th {
	border-top: 1px solid var(--wp--preset--color--foreground);
}
.woocommerce-page .wp-site-blocks .shop_table td {
	font-weight: normal;
	border-top: 1px solid var(--wp--preset--color--foreground);
}
.woocommerce-page .wp-site-blocks .shop_table td .button {
	word-break: normal;
}

 /* Force button-styling into Downloads table. */
.woocommerce-page .wp-site-blocks .shop_table td .woocommerce-MyAccount-downloads-file {
	margin: 0;
	background-color: var(--wp--preset--color--foreground);
	color: var(--wp--preset--color--background);
	padding: 0.8em 1.7em;
}

.woocommerce-page .wp-site-blocks .woocommerce-customer-details address {
	border: 1px solid var(--wp--preset--color--foreground);
}

.woocommerce-page .wp-site-blocks .woocommerce-customer-details address .woocommerce-customer-details--phone::before,
.woocommerce-page .wp-site-blocks .woocommerce-customer-details address .woocommerce-customer-details--email::before {
	content: '';
	margin: 0;
}

/*
 * Mark styling.
 */
.woocommerce mark {
	color: var(--wp--preset--color--foreground);
}

/*
 * Product Tabs.
 */
.woocommerce div.product ul.wc-tabs {
	padding: 0;
	overflow: visible;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-bottom-color: var(--wp--preset--color--foreground);
}

.woocommerce div.product ul.wc-tabs li {
	background: var(--wp--preset--color--background);
	margin: 0;
	padding: 0.5em 1em 0.5em 1em;
	border-color: transparent;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	float: left;
	border-style: solid;
	border-width: 1px;
	border-bottom-width: 0;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}

.woocommerce div.product ul.wc-tabs li:first-child {
	margin-left: 1em;
}

.woocommerce div.product ul.wc-tabs li.active {
	border-left-color: var(--wp--preset--color--foreground);
	border-right-color: var(--wp--preset--color--foreground);
	border-top-color: var(--wp--preset--color--foreground);
	box-shadow: 0 1px var(--wp--preset--color--background);
	/* Fix baseline with ul's bottom border.*/
	position: relative;
	z-index: 2;
	top: 1px; /* Border width */
}
.woocommerce div.product ul.wc-tabs li.active a {
	/* Fix baseline with ul's bottom border.*/
	position: relative;
	z-index: 2;
	top: -1px; /* Border width */
}

.woocommerce div.product ul.wc-tabs li a {
	text-decoration: none;
}

/**
 * Mini-Cart.
 */
.wp-block-woocommerce-filled-mini-cart-contents-block {
	padding: 1em 1em 0 1em;
}

/*
 * Make out-of-stock label red and bold.
 */
p.stock.out-of-stock {
	color: var(--wp--preset--color--vivid-red);
	font-weight: bold;
}

/*
 * Breadcrumb global styling.
 */
.woocommerce .wp-site-blocks .woocommerce-breadcrumb {
	margin-bottom: 2rem;
}

/*
 * Add space when viewing a single variation.
 */
.single_variation_wrap .single_variation {
	margin-bottom: var(--wp--style--block-gap);
}

/*
 * Add space on single-product page between image and title in mobile viewport.
 */
@media only screen and (max-width: 768px) {
	.woocommerce-page div.product div.summary {
		margin-top: var(--wp--style--block-gap);
	}
}

/*
 * Store Notice.
 */
.woocommerce-store-notice {
	padding: 1rem;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 999;
	margin: 0;
	box-sizing: border-box;
}

.woocommerce-store-notice .woocommerce-store-notice__dismiss-link {
	float: right;
	margin-right: 4rem;
	color: inherit;
}

@media only screen and (max-width: 1279px) {
	.woocommerce-store-notice {
		padding: 1rem 8rem 1rem 1rem;
	}

	.woocommerce-store-notice .woocommerce-store-notice__dismiss-link {
		float: none;
		margin-right: 0;
		position: absolute;
		top: 50%;
		right: 1rem;
		transform: translateY(-50%);
	}
}

/**
 * Sale Badge coloring.
 */
.woocommerce .wp-site-blocks span.onsale {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--foreground);
}

/*
 * Fix buttons styling.
 * Simulate wp-element-button default styling.
 */
.woocommerce .wp-site-blocks a.button,
.woocommerce .wp-site-blocks button[name=add-to-cart],
.woocommerce .wp-site-blocks input[name=submit],
.woocommerce .wp-site-blocks button.single_add_to_cart_button,
.woocommerce .wp-site-blocks button[type=submit]:not(.wp-block-search__button) {
	padding: 0.8rem 2.7rem;
	word-break: normal;
}

/*
 * Account page.
 */
.woocommerce-MyAccount-content .gcol2-set .woocommerce-Address-title h3 {
	font-size: var(--wp--preset--font-size--large);
}

/*
 * Fix ul products grid on TT3.
 */
.woocommerce .wp-site-blocks .products li.product {
	justify-content: flex-start;
}

.woocommerce .wp-site-blocks ul.products li.product .woocommerce-loop-product__link > * {
	margin-bottom: 1rem;
	margin-top: 0;
}

/*
 * Simulate font-size fixes from TT2 to mitigate layout changes.
 */
.woocommerce-page h2 {
	font-size: var(--wp--preset--font-size--large);
}

/*
 * Fix price font-size inherited from TT3 (Legacy template.)
 */
.woocommerce .wp-site-blocks div.product .entry-summary .woocommerce-Price-amount,
.woocommerce .wp-site-blocks div.product .entry-summary del,
.woocommerce .wp-site-blocks div.product .entry-summary .price {
	font-size: 1em;
}
.woocommerce.woocommerce-page .wp-site-blocks div.product .entry-summary > .woocommerce-Price-amount,
.woocommerce.woocommerce-page .wp-site-blocks div.product .entry-summary > del,
.woocommerce.woocommerce-page .wp-site-blocks div.product .entry-summary > .price {
	font-size: var(--wp--preset--font-size--large);
}

/*
 * Reset/Remove price font-size inherited from TT3 (Block template.)
 */
.wp-site-blocks .wp-block-group.woocommerce.product .woocommerce-Price-amount,
.wp-site-blocks .wp-block-group.woocommerce.product del,
.wp-site-blocks .wp-block-group.woocommerce.product .price {
	font-size: 1em;
}

 /*
  * Reset TT3 rule for better layout management.
  */
 .wp-block-woocommerce-product-details .woocommerce-Tabs-panel {
	padding-top: 0;
 }

/*
 * Fix query header margin issue.
 *
 * Hint: Remove when this is fixed in core.
 */
 .wp-block-query-is-layout-flow .wp-block-post-template {
	margin-block-start: 1.5em;
 }