/**
 * Cocooned Customisations
 *
 * Tokens mirror the live Arte Theme Options (see arte-design-guide.md):
 *   accent        #B89D4F      accent hover  #A4893B
 *   UI type       Poppins, uppercase, .75rem, letter-spacing .08em
 *   transition    80ms ease-in
 */

:root {
	--cc-accent: #b89d4f;
	--cc-accent-hover: #a4893b;
	--cc-hairline: rgba(0, 0, 0, 0.125);
	--cc-muted: rgba(0, 0, 0, 0.6);
	--cc-thumb-gap: 0.625rem;
}


/* =========================================================================
   1. Shop — tag filter
   ====================================================================== */

.cc-tag-filter {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.75rem 1rem;
	width: 100%;
	margin: 0 0 1.75rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--cc-hairline);
	clear: both;
}

.cc-tag-filter__label {
	font-family: 'Poppins', sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cc-muted);
	flex: 0 0 auto;
}

.cc-tag-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-tag-filter__list > li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cc-tag-filter__list > li::before {
	content: none; /* Arte adds bullets to some list contexts */
}

.cc-tag {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	padding: 0.5em 1.1em;
	border: 1px solid var(--cc-accent);
	border-radius: 0;
	font-family: 'Poppins', sans-serif;
	font-size: 0.75rem;
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-decoration: none;
	color: var(--cc-accent);
	background-color: transparent;
	transition: all 80ms ease-in;
}

.cc-tag:hover,
.cc-tag:focus {
	background-color: var(--cc-accent);
	border-color: var(--cc-accent);
	color: #fff;
	text-decoration: none;
}

.cc-tag.is-active {
	background-color: var(--cc-accent);
	border-color: var(--cc-accent);
	color: #fff;
}

.cc-tag.is-active:hover,
.cc-tag.is-active:focus {
	background-color: var(--cc-accent-hover);
	border-color: var(--cc-accent-hover);
}

.cc-tag__count {
	font-size: 0.9em;
	opacity: 0.65;
}

.cc-tag:focus-visible {
	outline: 2px solid var(--cc-accent-hover);
	outline-offset: 2px;
}

/* Mobile: pills must stay comfortably tappable. An earlier version REDUCED
   padding here, which pushed them to 26px high — well under the 44px touch
   target guideline. Grow them instead. */
@media (max-width: 767px) {
	.cc-tag-filter {
		gap: 0.5rem 0.75rem;
	}

	.cc-tag {
		min-height: 44px;
		padding: 0.5em 1em;
	}
}


/* =========================================================================
   2. Single product — gallery with thumbnail row
   ====================================================================== */

/* Stage: show only the active image. Specificity beats Arte's
   `.woocommerce.single-product div.product[id] .woocommerce-product-gallery__image`. */
.woocommerce.single-product div.product[id] .cc-gallery .woocommerce-product-gallery__image {
	margin-top: 0;
	display: none;
}

.woocommerce.single-product div.product[id] .cc-gallery .woocommerce-product-gallery__image.cc-is-active {
	display: block;
}

.cc-gallery .woocommerce-product-gallery__image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Thumbnail row — grid of equal columns at width:100%, so the row's outer
   edges land exactly on the main image's edges regardless of image count. */
.cc-gallery__thumbs {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: var(--cc-thumb-gap);
	width: 100%;
	margin-top: var(--cc-thumb-gap);
	padding: 0;
	list-style: none;
}

.cc-gallery__thumbs > li {
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0; /* let grid tracks shrink evenly */
}

.cc-gallery__thumbs > li::before {
	content: none;
}

.cc-gallery__thumb {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	position: relative;
	line-height: 0;
	transition: opacity 80ms ease-in;
	opacity: 0.72;
}

.cc-gallery__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* Mobile: thumbs shrink to ~83px, and a square crop of a full-length garment
   shot cuts off head and feet — at that size the images become unreadable.
   Match the main image's portrait ratio instead so the garment still reads. */
@media (max-width: 767px) {
	.cc-gallery__thumb img {
		aspect-ratio: 4 / 5;
	}
}

.cc-gallery__thumb:hover,
.cc-gallery__thumb:focus {
	opacity: 1;
}

.cc-gallery__thumb.cc-is-active {
	opacity: 1;
}

/* Active marker in the brand gold, drawn inside the bounds so it never
   changes the track width and breaks the flush edges. */
.cc-gallery__thumb.cc-is-active::after {
	content: '';
	position: absolute;
	inset: 0;
	border: 2px solid var(--cc-accent);
	pointer-events: none;
}

.cc-gallery__thumb:focus-visible {
	outline: 2px solid var(--cc-accent-hover);
	outline-offset: 2px;
}

/* Keep the gallery visible if WooCommerce's init script does not run. */
.cc-gallery.woocommerce-product-gallery {
	opacity: 1 !important;
}

/* Footer styling deliberately does NOT live here.
 *   Colours  → Appearance ▸ Customize ▸ Colors ▸ Footer
 *              (theme mods color_footer_bg / color_footer / color_footer_links / color_footer_titles)
 *   Padding  → Appearance ▸ Customize ▸ Additional CSS
 * Keeping it out of this file means both stay editable from the WP backend;
 * a rule here would silently override the Customizer.
 */