/*
Theme Name: Grubby Garms
Theme URI: https://grubbygarms.com
Author: Featherbelly / Komoko Ltd
Author URI: https://grubbygarms.com
Description: Custom FSE block theme for Grubby Garms — independent streetwear label.
Version: 0.1.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: grubby-garms
Tags: full-site-editing, block-theme, e-commerce, woocommerce
*/

/* =============================================================================
   HEADER
   ============================================================================= */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	border-bottom: 2px solid #1A1A1A;
}

.site-header .wp-block-site-title a {
	color: #1A1A1A !important;
	text-decoration: none;
}

.site-header .wp-block-site-title a:hover {
	color: #E8520A !important;
}

.site-header .wp-block-navigation a {
	color: #1A1A1A !important;
	text-decoration: none;
	transition: color 0.15s ease;
}

.site-header .wp-block-navigation a:hover {
	color: #E8520A !important;
}

/* Cart + account icons */
.header-icons .wc-block-mini-cart__button,
.header-icons .wc-block-customer-account__account-link {
	color: #1A1A1A;
}

.header-icons .wc-block-mini-cart__button:hover,
.header-icons .wc-block-customer-account__account-link:hover {
	color: #E8520A;
}

/* =============================================================================
   FOOTER
   ============================================================================= */

.site-footer .footer-bottom {
	border-top: 1px solid #2E2E2E;
	padding-top: 2rem !important;
	padding-bottom: 2rem !important;
}

.site-footer .footer-bottom p {
	font-size: 0.6875rem !important;
	color: #666660 !important;
	letter-spacing: 0.04em;
}

.site-footer .footer-nav-list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.site-footer .footer-nav-list li {
	margin-bottom: 0.5rem;
}

.site-footer .footer-nav-list a,
.site-footer ul li a {
	color: #9A9A8E;
	text-decoration: none;
	font-size: 0.875rem;
	transition: color 0.15s ease;
}

.site-footer .footer-nav-list a:hover,
.site-footer ul li a:hover {
	color: #F0EDE4;
}

.site-footer h6 {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 0.75rem;
	color: #F0EDE4;
	margin-bottom: 1rem;
}

/* =============================================================================
   GLOBAL — square corners everywhere
   ============================================================================= */

.wp-block-button__link,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .checkout-button {
	border-radius: 0 !important;
}

/* =============================================================================
   BUTTONS — orange primary
   ============================================================================= */

.wp-block-button__link {
	background-color: #E8520A;
	color: #F0EDE4;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 0;
	transition: background-color 0.15s ease;
}

.wp-block-button__link:hover {
	background-color: #1A1A1A;
	color: #F0EDE4;
}

.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .cart .button,
.woocommerce .checkout-button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: #E8520A !important;
	color: #F0EDE4 !important;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	border-radius: 0 !important;
	transition: background-color 0.15s ease;
}

.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce .cart .button:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
	background-color: #1A1A1A !important;
	color: #F0EDE4 !important;
}

/* =============================================================================
   NAVIGATION
   ============================================================================= */

.site-header .wp-block-navigation a {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.9rem;
	color: #F0EDE4;
	text-decoration: none;
}

.site-header .wp-block-navigation a:hover {
	color: #F5D76E;
}

/* =============================================================================
   WOOCOMMERCE — product cards
   ============================================================================= */

.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product {
	background-color: #1A1A1A;
	padding: 0 0 1.25rem 0;
}

.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .woocommerce-loop-category__title {
	color: #F0EDE4 !important;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	font-size: 1.1rem !important;
	padding: 0.75rem 1rem 0.25rem !important;
}

.woocommerce ul.products li.product .price,
.woocommerce ul.products li.product .price .woocommerce-Price-amount {
	color: #F5D76E !important;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	padding: 0 1rem !important;
}

.woocommerce ul.products li.product .button {
	margin: 0.5rem 1rem 0 !important;
	width: calc(100% - 2rem) !important;
}

/* No rounded corners on product images */
.woocommerce ul.products li.product a img {
	border-radius: 0;
}

/* =============================================================================
   WOOCOMMERCE — price colours globally
   ============================================================================= */

.woocommerce .price .woocommerce-Price-amount,
.woocommerce p.price .woocommerce-Price-amount,
.woocommerce span.price .woocommerce-Price-amount {
	color: #E8520A;
}

/* Single product page price in orange */
.woocommerce div.product p.price .woocommerce-Price-amount,
.woocommerce div.product span.price .woocommerce-Price-amount {
	color: #E8520A;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	font-size: 1.5rem;
}

/* =============================================================================
   HERO — full bleed fix
   ============================================================================= */

.wp-block-cover.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Centre the inner content vertically */
.wp-block-cover__inner-container {
	display: flex;
	align-items: center;
	width: 100%;
	min-height: inherit;
	padding-top: 4rem;
	padding-bottom: 4rem;
}

/* =============================================================================
   WOOCOMMERCE — single product (block-based)
   ============================================================================= */

/* Product title */
.wp-block-woocommerce-product-details .woocommerce-product-gallery,
.woocommerce div.product {
	border-radius: 0;
}

.woocommerce div.product .product_title {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	letter-spacing: -0.02em !important;
	line-height: 0.95 !important;
	font-size: clamp(2.5rem, 6vw, 5rem) !important;
	color: #1A1A1A !important;
}

/* Size/variant selects */
.woocommerce div.product .variations select {
	border-radius: 0;
	border: 2px solid #1A1A1A;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	padding: 0.5rem 1rem;
	background-color: #F0EDE4;
}

/* Quantity input */
.woocommerce div.product .quantity input.qty {
	border-radius: 0;
	border: 2px solid #1A1A1A;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	font-size: 1.125rem;
}

/* Add to cart button on single product */
.woocommerce div.product .single_add_to_cart_button {
	border-radius: 0 !important;
	background-color: #E8520A !important;
	color: #F0EDE4 !important;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	font-size: 1.125rem !important;
	padding: 0.875rem 2rem !important;
}

.woocommerce div.product .single_add_to_cart_button:hover {
	background-color: #1A1A1A !important;
}

/* No rounded corners on gallery images */
.woocommerce div.product div.images img,
.woocommerce div.product div.images .flex-viewport {
	border-radius: 0 !important;
}

/* Tabs (Description, Reviews) */
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.9rem;
}

/* =============================================================================
   WOOCOMMERCE — cart block
   ============================================================================= */

.wc-block-cart__main-heading,
.wc-block-checkout__main-heading {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
	letter-spacing: -0.02em !important;
}

/* Cart item product names */
.wc-block-cart-item__product-name a {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	color: #1A1A1A;
	text-decoration: none;
}

/* Cart totals */
.wc-block-cart__totals-title {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif !important;
	font-weight: 900 !important;
	text-transform: uppercase !important;
}

/* Proceed to checkout button */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
	border-radius: 0 !important;
	background-color: #E8520A !important;
	color: #F0EDE4 !important;
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
	background-color: #1A1A1A !important;
}

/* =============================================================================
   WOOCOMMERCE — checkout form labels
   ============================================================================= */

.wc-block-components-form .wc-block-components-text-input label,
.wc-block-components-form .wc-block-components-select label {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 0.8125rem;
	letter-spacing: 0.06em;
}

.wc-block-components-text-input input,
.wc-block-components-select select {
	border-radius: 0 !important;
	border: 2px solid #1A1A1A !important;
}

/* =============================================================================
   WOOCOMMERCE — breadcrumbs
   ============================================================================= */

.woocommerce-breadcrumb,
.wc-block-breadcrumbs {
	font-size: 0.8125rem;
	color: #9A9A8E;
}

.woocommerce-breadcrumb a {
	color: #9A9A8E;
	text-decoration: none;
}

.woocommerce-breadcrumb a:hover {
	color: #F0EDE4;
}

/* =============================================================================
   TYPOGRAPHY FALLBACKS (before Google Fonts load)
   ============================================================================= */

h1, h2, h3, h4, h5, h6 {
	font-family: 'Barlow Condensed', 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

body {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}