/**
 * The Craft Collective — Goose Commerce theming.
 *
 * Goose blocks (ggmc/*) are themed entirely through CSS custom properties. This file
 * remaps Goose's default tokens (a blue / Bricolage-Grotesque "professional" theme) to
 * The Craft Collective design — warm cream, charcoal, terracotta + sage, Poppins + Nunito
 * Sans. Because we redefine every token here, this works whether or not Goose's
 * "Professional Defaults" are enabled (Settings → Widget Styles) — though leaving them ON
 * is recommended so the blocks keep their structural spacing/layout.
 *
 * Scoped to `html:root` (specificity 0,1,1) so it beats the plugin's own `:root` rules
 * regardless of stylesheet load order.
 */

html:root {
	/* --- Brand / accent (terracotta) --- */
	--ggmc-primary:        #c45d3e;
	--ggmc-primary-dark:   #a94a2e;
	--ggmc-primary-hover:  #a94a2e;
	--ggmc-primary-light:  rgba(196, 93, 62, 0.08);
	--ggmc-primary-shadow: rgba(196, 93, 62, 0.25);
	--ggmc-primary-shadow-hover: rgba(196, 93, 62, 0.40);

	/* --- Buttons (general) --- */
	--ggmc-button-bg:       #c45d3e;
	--ggmc-button-bg-hover: #a94a2e;
	--ggmc-button-text:     #ffffff;
	--ggmc-button-border:   #c45d3e;

	/* --- Add to Basket (Goose uses its OWN token here, not button-bg) --- */
	--ggmc-cart-button: #c45d3e;

	/* --- Text --- */
	--ggmc-text-primary:   #2d2d2d;
	--ggmc-text-secondary: #7a7268;
	--ggmc-text-muted:     #7a7268;
	--ggmc-text-light:     #9a9086;

	/* --- Surfaces / borders --- */
	--ggmc-background:    #ffffff; /* cards */
	--ggmc-surface:       #faf9f6; /* page ground */
	--ggmc-surface-hover: #f2ede4; /* sage tint */
	--ggmc-border:        #efe9e1;
	--ggmc-border-dark:   #eae4da;

	/* --- Radius (design: cards 16–18, buttons 11, pills 20) --- */
	--ggmc-border-radius-sm:  8px;
	--ggmc-border-radius-md:  11px;
	--ggmc-border-radius:     12px;
	--ggmc-border-radius-lg:  16px;
	--ggmc-border-radius-xl:  18px;
	--ggmc-border-radius-2xl: 20px;

	/* --- Badges: Bestseller = terracotta (featured), New = sage --- */
	--ggmc-badge-featured-bg:   #c45d3e;
	--ggmc-badge-featured-text: #ffffff;
	--ggmc-badge-new-bg:        #7d9a8c;
	--ggmc-badge-new-text:      #ffffff;
	--ggmc-badge-custom-bg:     #2d2d2d;
	--ggmc-badge-custom-text:   #ffffff;

	/* --- Soft hover shadow to match the design's gentle card lift --- */
	--ggmc-shadow-hover: 0 10px 24px rgba(45, 45, 45, 0.10);

	/* --- Type: Nunito Sans is the base UI/body face --- */
	--ggmc-font-family:     'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--ggmc-font-family-alt: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/*
 * Poppins for the "display" pieces inside Goose blocks — product names, prices and any
 * headings. Goose drives most text from --ggmc-font-family (Nunito Sans above); these
 * targeted rules lift the display elements to Poppins to match the design.
 * NOTE: verify these class names against the live rendered markup and refine if needed.
 */
:is([class*="ggmc-"]) :is(h1, h2, h3),
.ggmc-product-name,
.ggmc-product-title,
.ggmc-product-price,
.ggmc-category-grid-name,
.ggmc-search-btn,
[class*="ggmc-"][class*="-name"],
[class*="ggmc-"][class*="-price"] {
	font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

/* ------------------------------------------------------------------ *
 * Home-page block touches the --ggmc-* tokens can't reach on their own.
 * (Base colour/border/radius already come from the token overrides above.)
 * ------------------------------------------------------------------ */

/* Real rendered classes verified against the live site DOM; values taken
   straight from the design HTML (The Craft Collective.dc.html). */

/* --- Shop by category (ggmc/category-grid) --- */
.ggmc-category-grid-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	text-align: center;
	text-decoration: none;
}
.ggmc-category-grid-image-wrap,
.ggmc-category-grid-image-placeholder {
	width: 100%;
	aspect-ratio: 1 / 1;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 8px 22px rgba(45, 45, 45, .08);
}
.ggmc-category-grid-image-placeholder {
	display: block;
	background-color: #efe9e1;
	background-image: repeating-linear-gradient(135deg, rgba(196, 93, 62, .055) 0 9px, transparent 9px 18px);
}
.ggmc-category-grid-name {
	margin: 0;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	color: #2d2d2d;
}

/* --- Product cards (ggmc/product-grid → .product-grid-item) --- */
.ggmc-products-grid .product-grid-item {
	position: relative;            /* anchor for the badge + wishlist overlays */
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #efe9e1;
	border-radius: 18px;
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
}
/* Product image sits at the top; badge + heart overlay it (design). */
.ggmc-products-grid .product-image {
	position: relative;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	order: 0;
}
.ggmc-products-grid .product-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.ggmc-products-grid .product-grid-item:hover {
	box-shadow: 0 16px 34px rgba(45, 45, 45, .10);
	transform: translateY(-3px);
}
.ggmc-products-grid .product-content {
	padding: 16px 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.ggmc-products-grid .product-title {
	margin: 0;
	font-family: 'Nunito Sans', system-ui, sans-serif;
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.3;
}
.ggmc-products-grid .product-title a { color: #2d2d2d; }
.ggmc-products-grid .product-price,
.ggmc-products-grid .current-price {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #2d2d2d;
}
/* Badge → overlaid on the image, top-left (out of the content flow, so the
   "order" of the content no longer pushes it into an odd row). */
.ggmc-products-grid .product-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	margin: 0;
	display: flex;
	gap: 6px;
}
.ggmc-products-grid .badge {
	border-radius: 20px;
	padding: 5px 11px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .02em;
	line-height: 1;
	color: #fff;
	box-shadow: 0 2px 8px rgba(45, 45, 45, .18);
}
/* Goose doesn't apply the --ggmc-badge-* vars to these, so set them directly:
   Featured = terracotta (design "Bestseller"), New = sage. */
.ggmc-products-grid .badge-featured { background-color: #c45d3e; }
.ggmc-products-grid .badge-new { background-color: #7d9a8c; }
.ggmc-products-grid .badge-sale { background-color: #c45d3e; }
.ggmc-products-grid .badge-out-of-stock { background-color: #9a9086; }
/* the design shows one badge; when a product is both featured & new, hide "new" */
.ggmc-products-grid .badge-featured + .badge-new { display: none; }

/* Wishlist heart → round white button, top-right on the image (design). */
.ggmc-products-grid .wishlist-btn {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 3;
	width: 36px;
	height: 36px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 3px 8px rgba(0, 0, 0, .10);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .15s ease;
}
.ggmc-products-grid .wishlist-btn:hover { background: #fff; }
/* The eicons font isn't loaded on the block path, so draw the heart with an
   inline SVG mask (design's outline heart) that we can recolour on hover. */
.ggmc-products-grid .wishlist-btn i {
	display: block;
	width: 18px;
	height: 18px;
	background-color: #2d2d2d;
	-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.9'%3E%3Cpath d='M12 21s-7-4.4-9.5-8.5C.6 9 2 5.5 5.2 5.5c2 0 3.3 1.2 3.8 2.2h6c.5-1 1.8-2.2 3.8-2.2 3.2 0 4.6 3.5 2.7 7C19 16.6 12 21 12 21z'/%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.9'%3E%3Cpath d='M12 21s-7-4.4-9.5-8.5C.6 9 2 5.5 5.2 5.5c2 0 3.3 1.2 3.8 2.2h6c.5-1 1.8-2.2 3.8-2.2 3.2 0 4.6 3.5 2.7 7C19 16.6 12 21 12 21z'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: background-color .15s ease;
}
.ggmc-products-grid .wishlist-btn:hover i,
.ggmc-products-grid .wishlist-btn.is-active i { background-color: #c45d3e; }

/* --- Product search bar (ggmc/product-search — only used in the hero) --- */
/* De-scoped from .cc-hero-search so a freshly-inserted block styles automatically. */
.ggmc-product-search-form {
	max-width: 640px;
	margin: 30px auto 0;
	padding: 8px;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	display: flex;
	align-items: center;
	gap: 8px;
}
.ggmc-product-search-form .ggmc-search-input {
	flex: 1;
	border: none;
	outline: none;
	background: none;
	padding: 12px 14px;
	font-size: 15.5px;
	color: #2d2d2d;
}
.ggmc-product-search-form .ggmc-search-btn {
	border: none;
	border-radius: 11px;
	padding: 14px 28px;
	background: #c45d3e;
	color: #fff;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 700;
	font-size: 15px;
}
.ggmc-product-search-form .ggmc-search-btn:hover { background: #a94a2e; }

/* --- Trending tags (ggmc/tag-list, inline) — 4 white pills like the design --- */
/* De-scoped so a freshly-inserted Tag List styles automatically. */
.ggmc-tag-list.ggmc-tag-list-inline {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ggmc-tag-list-inline .ggmc-tag-list-item:nth-child(n+5) { display: none; } /* only 4, like the design */
.ggmc-tag-list-inline .ggmc-tag-list-link {
	background: #fff;
	border: 1px solid #eae4da;
	color: #2d2d2d;
	padding: 7px 15px;
	border-radius: 20px;
	font-size: 13px;
	font-weight: 600;
}
.ggmc-tag-list-inline .ggmc-tag-list-link:hover { background: #c45d3e; border-color: #c45d3e; color: #fff; }

/* ==================================================================
 * Category / Shop listing — filter sidebar + results.
 * Real block-render classes verified from the live DOM. Uses :has() so
 * the layout applies to ANY columns holding the filter — via the
 * Product-Listing template OR built directly on the page (no wrapper
 * class needed). The product-card chrome is already themed above and is
 * universal across every product grid.
 * ================================================================== */

/* Layout: the column with the filter → 250px; the results column → fluid.
   Column GAP is intentionally NOT set here so your Columns block "Block spacing"
   setting controls it (set it on the Columns block → Dimensions → Block spacing). */
.wp-block-columns:has(.ggmc-product-filter) { align-items: start; }
.wp-block-column:has(.ggmc-product-filter) { flex: 0 0 250px !important; max-width: 250px; }
.wp-block-column:has(.ggmc-products-grid) { flex: 1 1 auto; }

/* Taxonomy header (ggmc/taxonomy-header) → matches the design listing header. */
.ggmc-taxonomy-content { margin-bottom: 4px; }
.ggmc-breadcrumbs {
	display: block;
	margin-bottom: 14px;
	font-size: 13.5px;
	font-weight: 600;
	color: #7a7268;
}
.ggmc-breadcrumb-link { color: #7a7268; text-decoration: none; }
.ggmc-breadcrumb-link:hover { color: #c45d3e; }
.ggmc-breadcrumb-current { color: #2d2d2d; }
/* design uses "›" rather than "/" */
.ggmc-breadcrumb-separator { font-size: 0; }
.ggmc-breadcrumb-separator::after { content: "\203A"; font-size: 13.5px; color: #c1b8ac; margin: 0 6px; }
/* title + count on one line: "Ceramics · 5 products" */
.ggmc-taxonomy-content .ggmc-taxonomy-title {
	display: inline;
	font-family: 'Poppins', system-ui, sans-serif;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: #2d2d2d;
}
.ggmc-taxonomy-content .ggmc-taxonomy-count {
	display: inline;
	font-family: 'Nunito Sans', system-ui, sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: #7a7268;
}
.ggmc-taxonomy-content .ggmc-taxonomy-count::before { content: "\00A0\00B7\00A0"; }

/* Filter sidebar — real block-render classes (.filter-group + <label>, not sections). */
.ggmc-product-filter { font-family: 'Nunito Sans', system-ui, sans-serif; color: #2d2d2d; }
.ggmc-product-filter .filter-title {
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: #2d2d2d;
	margin: 0 0 8px;
}
.ggmc-product-filter .filter-group {
	border-top: 1px solid #eae4da;
	padding: 16px 0;
}
.ggmc-product-filter .filter-group > label {
	display: block;
	margin-bottom: 8px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	font-size: 14.5px;
	color: #2d2d2d;
}
.ggmc-product-filter .filter-input,
.ggmc-product-filter .filter-select,
.ggmc-product-filter input[type="text"],
.ggmc-product-filter input[type="number"],
.ggmc-product-filter input[type="search"],
.ggmc-product-filter select {
	width: 100%;
	border: 1.5px solid #e4ddd0;
	border-radius: 10px;
	padding: 9px 12px;
	font-size: 14px;
	color: #2d2d2d;
	background: #fff;
}
/* Only the inputs row is flex — .price-group stays block so the label sits on top. */
.ggmc-product-filter .price-inputs { display: flex; align-items: center; gap: 8px; }
.ggmc-product-filter .price-inputs .filter-input { width: auto; flex: 1; min-width: 0; }
.ggmc-product-filter .input-separator { color: #9a9086; }
.ggmc-product-filter .currency-label { color: #7a7268; font-weight: 600; }
.ggmc-product-filter .filter-actions { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ggmc-product-filter .filter-apply-btn {
	background: #c45d3e;
	color: #fff;
	border: none;
	border-radius: 11px;
	padding: 10px 18px;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 600;
	cursor: pointer;
}
.ggmc-product-filter .filter-apply-btn:hover { background: #a94a2e; }
.ggmc-product-filter .filter-reset-btn {
	background: none;
	border: none;
	color: #7a7268;
	font-weight: 600;
	cursor: pointer;
}

/* ---------------- Listing: Sort dropdown + Pagination (design values) ---------------- */

/* Sort dropdown (.grid-sorting-controls) */
.grid-sorting-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 24px;
}
.grid-sorting-controls .sorting-group { display: flex; align-items: center; gap: 10px; }
.grid-sorting-controls label {
	font-family: 'Nunito Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #7a7268;
}
.grid-sort-select {
	appearance: none !important;
	-webkit-appearance: none !important;
	border: 1.5px solid #e4ddd0 !important;
	border-radius: 10px !important;
	padding: 10px 38px 10px 14px !important;
	font-family: 'Nunito Sans', system-ui, sans-serif;
	font-size: 14px;
	font-weight: 600;
	color: #2d2d2d;
	cursor: pointer;
	background-color: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a7268' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px;
}

/* Pagination (.ggmc-pagination) → row of 40px rounded buttons, active terracotta. */
.ggmc-pagination { margin-top: 40px !important; }
.ggmc-pagination .pagination-wrapper {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.ggmc-pagination .pagination-current,
.ggmc-pagination .pagination-page,
.ggmc-pagination .pagination-prev,
.ggmc-pagination .pagination-next {
	min-width: 40px !important;
	height: 40px !important;
	padding: 0 12px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: 1.5px solid #e4ddd0 !important;
	border-radius: 11px !important;
	background: #fff !important;
	color: #2d2d2d !important;
	font-family: 'Poppins', system-ui, sans-serif;
	font-weight: 700;
	font-size: 14.5px;
	text-decoration: none;
	transition: border-color .15s ease, color .15s ease;
}
.ggmc-pagination .pagination-current {
	background: #c45d3e !important;
	border-color: #c45d3e !important;
	color: #fff !important;
}
.ggmc-pagination .pagination-page:hover,
.ggmc-pagination .pagination-prev:hover,
.ggmc-pagination .pagination-next:hover {
	border-color: #c45d3e;
	color: #c45d3e;
}