/*
Theme Name: The Craft Collective
Theme URI: https://listings.ggm-commerce.com/
Description: Block (FSE) theme for The Craft Collective — a marketplace storefront for independent makers, built to the client's high-fidelity design (warm cream / charcoal / terracotta with sage accents, Poppins + Nunito Sans). Commerce is provided by Goose Commerce (NOT WooCommerce); product grids, filters and product detail are added with Goose blocks on the live site.
Author: AJR Web Design
Version: 0.1.0
Requires at least: 6.6
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: craft-collective
Tags: full-site-editing, block-styles, e-commerce, custom-colors, custom-menu
*/

/*
 * Design system lives in theme.json. Keep style.css for edge-case overrides only.
 * The striped "placeholder image" look from the design reference:
 */
.is-style-cc-placeholder {
	background-color: #efe9e1;
	background-image: repeating-linear-gradient(135deg, rgba(196, 93, 62, .055) 0 9px, transparent 9px 18px);
}

/* Brand logo — rotated terracotta "c" mark + two-line wordmark (from the design). */
.cc-logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
}
.cc-logo-mark {
	flex: none;
	width: 40px;
	height: 40px;
	background: #c45d3e;
	border-radius: 13px;
	display: flex;
	align-items: center;
	justify-content: center;
	transform: rotate(-6deg);
}
.cc-logo-mark > span {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 800;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	transform: rotate(6deg);
}
.cc-logo-word {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.01em;
	line-height: 1;
	color: #2d2d2d;
}
.cc-logo-word > span { color: #c45d3e; }

/* ---------------- Main nav ---------------- */
/* Design nav links: charcoal, Poppins 700 / 14.5px, hover terracotta.
   (Overrides the global terracotta link colour, which is zero-specificity :where().) */
.cc-nav a,
.cc-nav .wp-block-navigation-item__content {
	color: #2d2d2d;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 700;
	font-size: 14.5px;
}
.cc-nav a:hover,
.cc-nav .wp-block-navigation-item__content:hover,
.cc-nav .current-menu-item > a {
	color: #c45d3e;
}

/* ---------------- Utility (top) bar ---------------- */
.cc-utilitybar .wp-block-group { align-items: center; }

/* Right-side links: Sell · | · Sign in (with person icon) — matches the design. */
.cc-util-group { display: inline-flex; align-items: center; gap: 18px; }
.cc-util-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: #e9e4dc;
	font-weight: 600;
	text-decoration: none;
}
.cc-util-link:hover { color: #fff; }
.cc-util-divider { flex: none; width: 1px; height: 16px; background: #4a4a4a; }
.cc-signin svg { width: 15px; height: 15px; }

/* Static currency indicator — sage chip + code (Goose is single-currency). */
.cc-currency {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}
.cc-currency-sym {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #7d9a8c;
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* Mini-cart button in the top bar. */
.cc-utilitybar .wp-block-ggmc-mini-cart .mini-cart-button {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: #e9e4dc;
	font-weight: 600;
	font-size: 13px;
}
.cc-utilitybar .mini-cart-icon-wrapper {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
/* Goose only ships icon+count OR text-only — insert the "Basket" label between the
   icon and the count so it reads: [bag] Basket [2], like the design. */
.cc-utilitybar .mini-cart-icon-wrapper::after {
	content: "Basket";
	order: 2;
	font-weight: 600;
	color: #e9e4dc;
}
/* FontAwesome isn't loaded on the block path — draw the basket with an SVG mask. */
.cc-utilitybar .mini-cart-icon-wrapper i {
	order: 1;
	display: inline-block;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%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='%23000' stroke-width='1.8'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Count badge → small terracotta pill, forced back into flow after "Basket"
   (Goose positions it absolutely as a notification badge, which overlapped the text). */
.cc-utilitybar .cart-count {
	order: 3;
	/* Goose sets position:absolute with higher specificity — force it into flow. */
	position: static !important;
	inset: auto !important;
	top: auto !important;
	right: auto !important;
	margin: 0 !important;
	transform: none !important;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: #c45d3e;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}