/* ============================================================
   Freaura — SHOP archive (WooCommerce)
   Wireframe: page-header → shop-controls (count + filter) →
   .piece card grid. Ported from freaura-spa.html, tokenized.
   .frx-page-header comes from pages.css (also enqueued on shop).
   ============================================================ */

.frx-shop { background: var(--cream); }

/* ---- shop controls (count + filter bar) ---- */
.frx-shop-controls {
	display: flex; align-items: center; justify-content: space-between;
	flex-wrap: wrap; gap: 20px;
	max-width: 1500px; margin: 0 auto; padding: 40px 50px 0;
}
.frx-shop-controls .shop-count {
	font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.28em;
	text-transform: uppercase; color: var(--ink-soft);
}
.frx-shop-controls .shop-filter { display: flex; gap: 30px; flex-wrap: wrap; }
.frx-shop-controls .shop-filter button {
	background: none; border: none; font-family: var(--font-sans); font-size: 12px; font-weight: 400;
	letter-spacing: 0.28em; text-transform: uppercase; color: var(--ink-soft);
	cursor: pointer; padding: 4px 0; transition: color 0.3s, border-color 0.3s;
	border-bottom: 0.5px solid transparent;
}
.frx-shop-controls .shop-filter button:hover { color: var(--ink); }
.frx-shop-controls .shop-filter button.active {
	color: var(--emerald); border-bottom-color: var(--brass);
}

/* ---- collection grid + piece cards (mirrors home.css so shop is self-contained) ---- */
.frx-collection { padding: 50px 50px 120px; }
.frx-collection .collection-grid {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
	max-width: 1500px; margin: 0 auto;
}
.frx-collection .piece,
.frx-collection a.piece,
.frx-collection a.piece:hover { display: block; position: relative; text-decoration: none !important; }
.frx-collection a.piece * { text-decoration: none !important; }
.frx-collection .piece-img {
	aspect-ratio: 3/4; overflow: hidden; position: relative;
	background: var(--cream-deep); margin-bottom: 22px;
}
.frx-collection .piece-img img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 1.4s cubic-bezier(.2,.7,.2,1);
}
/* Gift Card product only — its uploaded artwork is landscape (1050x660,
   ~1.59:1) and fills its own canvas edge-to-edge (no internal padding to
   crop into safely), unlike the portrait model photography every other
   card uses. Forcing it through the same object-fit:cover as the 3:4
   portrait frame center-crops the design and cuts the leading "F" off
   "FREAURA" (confirmed live on /shop/ — was rendering as "REAURA").
   Switch just this image to contain so the full wordmark stays intact,
   letterboxed with the card's own existing cream-deep background rather
   than cropped. Scoped to this exact product via its alt text so no other
   card is affected. */
.frx-collection .piece-img img[alt="Freaura Gift Card"] {
	object-fit: contain;
}
.frx-collection .piece:hover .piece-img img { transform: scale(1.06); }
/* Organic Cotton badge (Custom Product Badge for WooCommerce plugin) was
   overlapping the sticky site header when scrolled near it — the plugin's
   own inline style sets z-index:90 (from its admin "Z-Index" field), which
   is higher than our header's z-index:50 (style.css), so the badge rendered
   ON TOP of the header instead of scrolling underneath it. Its top:0/right:0
   positioning itself is fine (correctly contained within .piece-img, which
   has position:relative) — this only fixes the stacking order. !important
   is required since the plugin sets z-index via an inline <style> tag,
   which otherwise always wins over an external stylesheet rule. */
.frx-collection .piece-img [class*="cpbw_badge_image_container_"] {
	z-index: 10 !important;
}
.frx-collection .piece-tag {
	position: absolute; top: 18px; left: 18px; background: var(--cream);
	color: var(--emerald); font-family: var(--font-sans); font-size: 9px;
	letter-spacing: 0.32em; text-transform: uppercase; padding: 6px 14px;
	z-index: 3; font-weight: 500;
}
.frx-collection .piece-quick {
	position: absolute; bottom: 0; left: 0; right: 0; background: var(--cream);
	color: var(--ink); padding: 14px 20px; font-family: var(--font-sans); font-size: 11px;
	letter-spacing: 0.32em; text-transform: uppercase; text-align: center;
	transform: translateY(100%); transition: transform 0.5s cubic-bezier(.2,.7,.2,1); z-index: 3;
}
.frx-collection .piece:hover .piece-quick { transform: translateY(0); }
.frx-collection .piece-name {
	font-family: var(--font-display); font-size: 24px; font-weight: 400;
	margin-bottom: 5px; color: var(--ink); text-transform: none;
}
.frx-collection .piece-name .it { font-style: italic; color: var(--emerald); }
.frx-collection .piece-meta { font-family: var(--font-serif); font-style: italic; font-size: 19px; font-weight: 400; color: var(--ink-soft); margin-bottom: 8px; }
.frx-collection .piece-price { font-family: var(--font-sans); font-size: 14px; font-weight: 400; color: var(--ink); }
/* the price html from Woo carries its own span — keep it inline & tokenized */
.frx-collection .piece-price .woocommerce-Price-amount { font-family: var(--font-sans); color: var(--ink); }
.frx-collection .piece-price del { color: var(--ink-soft); opacity: 0.6; margin-right: 6px; }

/* ---- pagination ---- */
.frx-shop-pagination { max-width: 1500px; margin: 60px auto 0; text-align: center; }
.frx-shop-pagination .page-numbers {
	list-style: none; display: inline-flex; gap: 18px; padding: 0; margin: 0;
	font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.2em;
}
.frx-shop-pagination .page-numbers a,
.frx-shop-pagination .page-numbers span {
	color: var(--ink-soft); text-decoration: none; padding-bottom: 4px;
	border-bottom: 0.5px solid transparent; transition: color 0.3s, border-color 0.3s;
}
.frx-shop-pagination .page-numbers .current,
.frx-shop-pagination .page-numbers a:hover { color: var(--brass); border-bottom-color: var(--brass); }

.frx-shop-empty { text-align: center; font-family: var(--font-serif); font-style: italic; font-size: 18px; color: var(--ink-soft); padding: 80px 0; }

/* Hide Astra/Woo default archive chrome we replaced (banner/result-count/ordering) */
.post-type-archive-product .ast-archive-entry-banner,
.post-type-archive-product .ast-archive-description,
.post-type-archive-product .woocommerce-products-header,
.post-type-archive-product .woocommerce-result-count,
.post-type-archive-product .woocommerce-ordering,
.post-type-archive-product .ast-woocommerce-container > .products.columns-3 { display: none; }

/* Responsive */
@media (max-width: 921px) {
	.frx-shop-controls { padding: 30px 24px 0; }
	.frx-collection { padding: 40px 24px 70px; }
	.frx-collection .collection-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
}
@media (max-width: 544px) {
	.frx-collection .collection-grid { grid-template-columns: 1fr; }
	.frx-shop-controls { flex-direction: column; align-items: flex-start; }
}