/* ==========================================================================
   Frosted Bloom — Shop archive (two-column: filter sidebar + product grid)
   Scoped under body.gfd-shop-frosted so it never touches any other page.
   Extends the homepage glass language in glass-homepage.css.
   ========================================================================== */

:root {
	--gfd-pink: #d6447a;
	--gfd-pink-dark: #c43a6c;
	--gfd-ink: #2e2e3a;
	--gfd-ink-soft: #5a5a6a;
	--gfd-glass: rgba(255, 255, 255, 0.55);
	--gfd-glass-strong: rgba(255, 255, 255, 0.75);
	--gfd-glass-border: rgba(255, 255, 255, 0.85);
	--gfd-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
	--gfd-sidebar-w: 290px;
}

/* Dreamy gradient wash behind the shop content (scoped to shop only). */
body.gfd-shop-frosted .mkdf-content {
	background: linear-gradient(160deg, #ffe8f0 0%, #ffeaf2 16%, #eef8f1 56%, #fef7ec 100%) !important;
}
body.gfd-shop-frosted .mkdf-container,
body.gfd-shop-frosted .mkdf-page-content-holder {
	background: transparent !important;
}
body.gfd-shop-frosted .mkdf-container,
body.gfd-shop-frosted .gfd-shop-layout,
body.gfd-shop-frosted ul.products li.product {
	font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}

/* --------------------------------------------------------------------------
   Two-column shell
   -------------------------------------------------------------------------- */
.gfd-shop-layout {
	display: flex;
	align-items: flex-start;
	gap: 30px;
	position: relative;
	/* No z-index here: it would create a stacking context that traps the
	   mobile off-canvas drawer + scrim below the page header. */
	width: 100%;
}
/* flex-basis auto (not 0) + min-width:0 so the column never collapses even if
   an ancestor shrink-wraps, but still fills the remaining width. */
.gfd-shop-main { flex: 1 1 auto; min-width: 0; max-width: 100%; }

/* --------------------------------------------------------------------------
   Left filter sidebar
   -------------------------------------------------------------------------- */
.gfd-shop-sidebar {
	flex: 0 0 var(--gfd-sidebar-w);
	width: var(--gfd-sidebar-w);
	position: sticky;
	top: 20px;
	align-self: flex-start;
	/* No internal scroll — the sidebar grows to fit its content and the page
	   scrolls instead (sticky keeps it in view while there's room). */
	background: var(--gfd-glass);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	border: 1px solid var(--gfd-glass-border);
	border-radius: 22px;
	box-shadow: var(--gfd-shadow);
}
.gfd-sidebar-inner { padding: 22px 22px 26px; }

.gfd-sidebar-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 16px;
}
.gfd-sidebar-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--gfd-ink);
}
.gfd-sidebar-close {
	display: none; /* mobile only */
	border: none;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--gfd-ink-soft);
	cursor: pointer;
}

/* Product search box (top of sidebar) */
.gfd-shop-search {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0 0 18px;
}
body.gfd-shop-frosted .gfd-shop-search-input {
	width: 100% !important;
	box-sizing: border-box !important;
	height: auto !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 11px 44px 11px 16px !important;
	border-radius: 14px !important;
	border: 1px solid var(--gfd-glass-border) !important;
	background: var(--gfd-glass-strong) none !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.3 !important;
	color: var(--gfd-ink) !important;
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none !important;
	appearance: none !important;
	transition: border-color .15s ease, box-shadow .15s ease;
}
body.gfd-shop-frosted .gfd-shop-search-input::placeholder { color: #9a9aa6; }
body.gfd-shop-frosted .gfd-shop-search-input:focus {
	border-color: rgba(214,68,122,0.5) !important;
	box-shadow: 0 0 0 3px rgba(214,68,122,0.12) !important;
}
/* Override the theme's themed-button styling so it stays a compact icon. */
body.gfd-shop-frosted .gfd-shop-search-btn {
	position: absolute !important;
	right: 6px !important;
	top: 50% !important;
	left: auto !important;
	transform: translateY(-50%) !important;
	width: 32px !important;
	height: 32px !important;
	min-width: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	border: none !important;
	border-radius: 10px !important;
	background: transparent !important;
	color: var(--gfd-pink) !important;
	cursor: pointer;
	box-shadow: none !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	-webkit-appearance: none !important;
	appearance: none !important;
}
body.gfd-shop-frosted .gfd-shop-search-btn:hover { background: rgba(214,68,122,0.1) !important; }
body.gfd-shop-frosted .gfd-shop-search-btn svg { display: block; }

.gfd-filter-group { margin-top: 22px; }
.gfd-filter-group:first-of-type { margin-top: 0; }
.gfd-filter-group h4 {
	margin: 0 0 14px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--gfd-pink);
}

/* Active filter chips */
.gfd-shop-chips {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px;
	margin-bottom: 4px;
	background: rgba(255,255,255,0.4);
	border: 1px solid var(--gfd-glass-border);
	border-radius: 16px;
}
.gfd-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border-radius: 18px;
	background: rgba(214,68,122,0.1);
	border: 1px solid rgba(214,68,122,0.28);
	color: var(--gfd-pink);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
}
.gfd-chip:hover { background: rgba(214,68,122,0.18); }
.gfd-chip-x { font-size: 15px; line-height: 1; opacity: .8; }
.gfd-chip-clear {
	background: transparent;
	border: 1px dashed rgba(214,68,122,0.5);
}

/* Availability — tag cloud (wraps inline, never one-per-row) */
.gfd-filter-chips {
	display: flex !important;
	flex-wrap: wrap;
	gap: 8px;
	align-items: flex-start;
}
.gfd-fchip {
	display: inline-block !important;
	width: auto !important;
	flex: 0 0 auto;
	padding: 6px 13px;
	border-radius: 18px;
	background: var(--gfd-glass-strong);
	border: 1px solid var(--gfd-glass-border);
	color: #4a4a5a;
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.3;
	text-decoration: none;
	transition: all .15s ease;
}
.gfd-fchip:hover { color: var(--gfd-pink); border-color: rgba(214,68,122,0.4); }
.gfd-fchip.is-on {
	background: var(--gfd-pink);
	color: #fff;
	border-color: var(--gfd-pink);
}

/* Hierarchical category tree */
.gfd-cat-tree { list-style: none; margin: 0; padding: 0; }
.gfd-cat-item { margin: 0; }
.gfd-cat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
}
.gfd-cat-link {
	flex: 1 1 auto;
	display: block;
	padding: 8px 10px;
	border-radius: 12px;
	color: #4a4a5a;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}
.gfd-cat-link:hover { background: rgba(214,68,122,0.08); color: var(--gfd-pink); }
.gfd-cat-link.is-current {
	background: rgba(214,68,122,0.12);
	color: var(--gfd-pink);
	font-weight: 700;
}
.gfd-cat-toggle {
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	background: none;
	color: var(--gfd-ink-soft);
	cursor: pointer;
	border-radius: 8px;
}
.gfd-cat-toggle:hover { background: rgba(214,68,122,0.08); color: var(--gfd-pink); }
.gfd-cat-caret { transition: transform .2s ease; font-size: 12px; }
.gfd-cat-item.is-expanded > .gfd-cat-row .gfd-cat-caret { transform: rotate(180deg); }

.gfd-cat-sub {
	list-style: none;
	margin: 2px 0 6px;
	padding: 0 0 0 12px;
	border-left: 2px solid rgba(214,68,122,0.15);
	margin-left: 10px;
	display: none;
}
.gfd-cat-item.is-expanded > .gfd-cat-sub { display: block; }
.gfd-cat-sub .gfd-cat-link { font-size: 13px; padding: 6px 10px; }

/* --------------------------------------------------------------------------
   Right column topbar (mobile filter btn + count + sort)
   -------------------------------------------------------------------------- */
.gfd-shop-topbar {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 20px;
	margin-bottom: 24px;
	background: var(--gfd-glass);
	-webkit-backdrop-filter: blur(18px);
	backdrop-filter: blur(18px);
	border: 1px solid var(--gfd-glass-border);
	border-radius: 18px;
	box-shadow: var(--gfd-shadow);
}
.gfd-shop-count { font-size: 15px; color: var(--gfd-ink-soft); margin-right: auto; }
.gfd-shop-count strong { color: var(--gfd-pink); font-weight: 700; }

.gfd-shop-filter-btn {
	display: none; /* desktop: sidebar is always visible */
	align-items: center;
	gap: 8px;
	padding: 9px 18px;
	border-radius: 20px;
	border: none;
	background: var(--gfd-pink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.gfd-filter-ico { font-size: 14px; line-height: 1; }
.gfd-filter-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 12px;
	background: #fff;
	color: var(--gfd-pink);
	font-size: 12px;
	font-weight: 700;
}

/* Native ordering <select> restyled as a glass pill */
.gfd-shop-sort .woocommerce-ordering { margin: 0; }
.gfd-shop-sort select,
.gfd-shop-sort .orderby {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background: var(--gfd-glass-strong) url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20width%3D'12'%20height%3D'8'%20viewBox%3D'0%200%2012%208'%3E%3Cpath%20fill%3D'%23d6447a'%20d%3D'M6%208L0%200h12z'%2F%3E%3C%2Fsvg%3E") no-repeat right 16px center;
	border: 1px solid var(--gfd-glass-border);
	border-radius: 20px;
	padding: 10px 38px 10px 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--gfd-ink);
	cursor: pointer;
	font-family: inherit;
	max-width: 230px;
}

/* --------------------------------------------------------------------------
   Product grid — glass cards (auto-fills the main column width)
   -------------------------------------------------------------------------- */
/* The theme wraps the loop in .mkdf-pl-main-holder (display:inline-block) and
   floats each product. Force a clean block holder + grid so nothing collapses
   or floats out of view inside the narrower right column. */
body.gfd-shop-frosted .mkdf-pl-main-holder {
	display: block !important;
	width: 100% !important;
	height: auto !important;
}
body.gfd-shop-frosted ul.products {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
	gap: 24px !important;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	width: 100% !important;
	height: auto !important;
	clear: both;
}
body.gfd-shop-frosted ul.products::before,
body.gfd-shop-frosted ul.products::after { content: none !important; display: none !important; }
/* Defeat theme float / masonry positioning / reveal-animations on items. */
body.gfd-shop-frosted ul.products > li.product {
	position: relative !important;
	top: auto !important;
	left: auto !important;
	float: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

body.gfd-shop-frosted ul.products li.product {
	width: auto !important;
	margin: 0 !important;
	padding: 16px 16px 18px !important;
	float: none !important;
	clear: none !important;
	background: var(--gfd-glass);
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid var(--gfd-glass-border);
	border-radius: 22px;
	box-shadow: var(--gfd-shadow);
	text-align: center;
	transition: transform .18s ease, box-shadow .18s ease;
	display: flex;
	flex-direction: column;
}
body.gfd-shop-frosted ul.products li.product:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px rgba(214,68,122,0.16);
}
/* content-product.php emits two EMPTY duplicate product links — hide them so
   they don't eat layout/height inside the flex card. */
body.gfd-shop-frosted li.product > a.woocommerce-loop-product__link:empty,
body.gfd-shop-frosted .mkdf-pl-inner > a.woocommerce-loop-product__link:empty {
	display: none !important;
}
/* The theme's .mkdf-pl-inner / .mkdf-pl-image are inline-block + overflow:hidden,
   and this build nests the title/price/cart INSIDE .mkdf-pl-image. Force them
   to plain visible block columns so nothing collapses or gets clipped. */
body.gfd-shop-frosted .mkdf-pl-inner {
	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	position: static !important;
	text-decoration: none;
	color: inherit;
}
body.gfd-shop-frosted .mkdf-pl-image {
	display: block !important;
	position: relative;
	width: 100% !important;
	height: auto !important;
	overflow: visible !important;
	margin-bottom: 14px;
}
/* Round + clip just the image itself (its wrapping link), not the whole block. */
body.gfd-shop-frosted .mkdf-pl-image > a {
	display: block;
	border-radius: 16px;
	overflow: hidden;
	background: rgba(255,255,255,0.4);
}
body.gfd-shop-frosted .mkdf-pl-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	transition: transform .4s ease;
}
body.gfd-shop-frosted li.product:hover .mkdf-pl-image img { transform: scale(1.06); }
body.gfd-shop-frosted .mkdf-onsale {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	background: var(--gfd-pink);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	padding: 4px 11px;
	border-radius: 14px;
	box-shadow: 0 6px 14px rgba(214,68,122,0.35);
}
body.gfd-shop-frosted .mkdf-out-of-stock,
body.gfd-shop-frosted .mkdf-new-product {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 2;
	background: rgba(46,46,58,0.78);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	padding: 4px 10px;
	border-radius: 12px;
}
body.gfd-shop-frosted h6.custom-product-title,
body.gfd-shop-frosted .mkdf-product-list-title {
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	margin: 0 0 8px !important;
	color: var(--gfd-ink) !important;
}
body.gfd-shop-frosted h6.custom-product-title a { color: inherit !important; text-decoration: none; }
body.gfd-shop-frosted li.product .price {
	display: block;
	margin: 0 0 14px !important;
	color: var(--gfd-pink) !important;
	font-weight: 700;
	font-size: 16px;
	margin-top: auto !important;
}
body.gfd-shop-frosted li.product .price del {
	color: #a9a9b4 !important;
	font-weight: 400;
	font-size: 13px;
	margin-right: 6px;
	opacity: .9;
}
body.gfd-shop-frosted li.product .price ins { text-decoration: none; }

/* Add to cart — pill, full width */
body.gfd-shop-frosted .mkdf-pl-add-to-cart { margin-top: auto; }
body.gfd-shop-frosted .mkdf-pl-add-to-cart a.button,
body.gfd-shop-frosted li.product a.add_to_cart_button,
body.gfd-shop-frosted li.product a.button.mkdf-pl-btn {
	display: block !important;
	width: 100%;
	box-sizing: border-box;
	background: rgba(214,68,122,0.1) !important;
	color: var(--gfd-pink) !important;
	border: 1px solid rgba(214,68,122,0.3) !important;
	padding: 11px 12px !important;
	border-radius: 14px !important;
	font-weight: 600 !important;
	font-size: 13px !important;
	text-align: center;
	text-decoration: none !important;
	transition: background .15s ease, color .15s ease;
}
body.gfd-shop-frosted .mkdf-pl-add-to-cart a.button:hover,
body.gfd-shop-frosted li.product a.add_to_cart_button:hover {
	background: var(--gfd-pink) !important;
	color: #fff !important;
}
body.gfd-shop-frosted li.product a.added_to_cart {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: var(--gfd-pink);
}
body.gfd-shop-frosted li.product > a .add-to-cart:empty { display: none; }

/* Price slider */
.gfd-range {
	position: relative;
	height: 30px;
	margin: 6px 4px 16px;
}
.gfd-range-track {
	position: absolute;
	top: 13px;
	left: 0;
	right: 0;
	height: 5px;
	border-radius: 4px;
	background: rgba(214,68,122,0.16);
}
.gfd-range-fill {
	position: absolute;
	top: 0;
	bottom: 0;
	border-radius: 4px;
	background: var(--gfd-pink);
}
.gfd-range-input {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	height: 30px;
	background: none;
	pointer-events: none;
	-webkit-appearance: none;
	appearance: none;
}
.gfd-range-input::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--gfd-pink);
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	cursor: pointer;
}
.gfd-range-input::-moz-range-thumb {
	pointer-events: auto;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--gfd-pink);
	box-shadow: 0 2px 6px rgba(0,0,0,0.2);
	cursor: pointer;
}
.gfd-price-fields {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 12px;
}
.gfd-price-fields label {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: var(--gfd-glass-strong);
	border: 1px solid var(--gfd-glass-border);
	border-radius: 12px;
	padding: 6px 10px;
	font-size: 13px;
	font-weight: 600;
	color: var(--gfd-ink);
}
.gfd-price-fields input {
	width: 58px;
	border: none;
	background: transparent;
	font-size: 13px;
	font-weight: 600;
	color: var(--gfd-ink);
	font-family: inherit;
	-moz-appearance: textfield;
}
.gfd-price-fields input::-webkit-outer-spin-button,
.gfd-price-fields input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.gfd-price-dash { color: var(--gfd-ink-soft); }
.gfd-price-apply {
	width: 100%;
	padding: 9px 18px;
	border: none;
	border-radius: 14px;
	background: var(--gfd-pink);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	font-family: inherit;
}
.gfd-price-apply:hover { background: var(--gfd-pink-dark); }

/* --------------------------------------------------------------------------
   Infinite scroll — hide native pagination, show a loading status
   -------------------------------------------------------------------------- */
body.gfd-shop-frosted .woocommerce-pagination { display: none !important; }
.gfd-shop-sentinel { width: 100%; height: 1px; }
.gfd-shop-status {
	text-align: center;
	padding: 26px 0 6px;
	min-height: 10px;
	color: var(--gfd-ink-soft);
	font-size: 14px;
	font-weight: 600;
}
.gfd-shop-status.is-loading::after {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	border: 3px solid rgba(214,68,122,0.25);
	border-top-color: var(--gfd-pink);
	border-radius: 50%;
	animation: gfd-spin .7s linear infinite;
	vertical-align: middle;
}
@keyframes gfd-spin { to { transform: rotate(360deg); } }

/* Off-canvas sidebar scrim (mobile only) */
.gfd-sidebar-scrim { display: none; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	:root { --gfd-sidebar-w: 250px; }
	.gfd-shop-layout { gap: 22px; }
}

/* Tablet/mobile: sidebar becomes an off-canvas drawer */
@media (max-width: 860px) {
	.gfd-shop-layout { grid-template-columns: 1fr; }
	.gfd-shop-filter-btn { display: inline-flex; }

	.gfd-shop-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		height: 100%;
		width: 86%;
		max-width: 340px;
		max-height: none;
		overflow-y: auto; /* drawer can be taller than the screen on mobile */
		-webkit-overflow-scrolling: touch; /* momentum scroll on iOS */
		overscroll-behavior: contain;
		border-radius: 0 22px 22px 0;
		/* Above the frosted header (z 1100) so the header can't cover the drawer
		   top or intercept touch-scroll. */
		z-index: 1200;
		transform: translateX(-105%);
		transition: transform .28s ease;
		/* As an overlay drawer the translucent glass is unreadable over the
		   page behind it — use a solid surface and drop the backdrop blur. */
		background: #fff6fa !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		border-right: 1px solid rgba(214,68,122,0.12);
		box-shadow: 10px 0 44px rgba(46,46,58,0.22);
	}
	body.gfd-shop-drawer-open .gfd-shop-sidebar { transform: translateX(0); }
	.gfd-sidebar-close { display: block; }

	.gfd-sidebar-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(46,46,58,0.4);
		-webkit-backdrop-filter: blur(2px);
		backdrop-filter: blur(2px);
		opacity: 0;
		visibility: hidden;
		transition: opacity .28s ease, visibility .28s ease;
		z-index: 1150; /* below the drawer (1200), above the header (1100) */
	}
	body.gfd-shop-drawer-open .gfd-sidebar-scrim { opacity: 1; visibility: visible; }
	body.gfd-shop-drawer-open { overflow: hidden; }
}

@media (max-width: 480px) {
	body.gfd-shop-frosted ul.products {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px !important;
	}
	body.gfd-shop-frosted ul.products li.product { padding: 10px 10px 14px !important; }
	.gfd-shop-topbar { padding: 10px 14px; }
}

/* Availability badge on product cards is styled globally in style.css
   (.gfd-avail-badge), colour-driven per term via availability_color.
   Keep the grid centering here. */
body.gfd-shop-frosted ul.products li.product .gfd-avail-badges {
	justify-content: center;
}