/* =========================================================
   Natural Gems — Shop Catalog CSS (shop.css)
   Contains shop category grids, toolbars, sidebar filters.
   ========================================================= */


/* Toolbar */
.ng-shop-toolbar { background: var(--c-background); border-bottom: 1px solid rgba(198,198,205,.3); }
.ng-shop-toolbar__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; padding-bottom: 16px; }
.ng-shop-toolbar__label { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .3em; }
.ng-shop-toolbar__right { display: flex; align-items: center; gap: 12px; }
.ng-shop-toolbar__count { color: var(--c-on-surface-variant); letter-spacing: .2em; }
.ng-shop-sort select {
	background: transparent; border: 1px solid var(--c-outline-variant);
	padding: 8px 12px; font-size: 12px; font-family: inherit;
	color: var(--c-primary); cursor: pointer; outline: none;
}
.ng-shop-sort select:focus { border-color: var(--c-primary); }
.ng-shop-filterbtn { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .2em; font-weight: 600; color: var(--c-primary); text-transform: uppercase; }

/* Body Layout */
.ng-shop-body { padding: 48px 0; }
@media (min-width: 768px) { .ng-shop-body { padding: 64px 0; } }
.ng-shop-body__row { display: flex; gap: 40px; align-items: flex-start; }
.ng-shop-sidebar { width: 256px; flex-shrink: 0; position: sticky; top: 24px; max-height: calc(100vh - 80px); overflow-y: auto; padding-right: 12px; }
.ng-shop-grid-wrap { flex: 1; min-width: 0; }

/* Grid structure matching React */
.ng-shop-grid-wrap ul.products { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 20px; row-gap: 40px; }
@media (min-width: 1024px) { .ng-shop-grid-wrap ul.products { grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 64px; } }
.ng-shop-grid-wrap ul.products li { list-style: none; margin: 0; padding: 0; }

/* Enforce grid items width & reset floats */
.ng-shop-grid-wrap ul.products li.product {
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}
.ng-shop-grid-wrap ul.products li.product::before {
	display: none !important;
}
.woocommerce span.onsale, .woocommerce-page span.onsale {
	display: none !important;
}

/* Pagination */
.ng-shop-pagination { margin-top: 64px; text-align: center; }
.ng-shop-pagination .nav-links { display: inline-flex; gap: 8px; }
.ng-shop-pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 40px; height: 40px; padding: 0 12px;
	border: 1px solid var(--c-outline-variant); color: var(--c-primary);
	font-size: 14px; transition: all .2s;
}
.ng-shop-pagination .page-numbers.current,
.ng-shop-pagination .page-numbers:hover { background: #ecb5b5 !important; color: #070e22 !important; border-color: #ecb5b5 !important; }

/* Empty state */
.ng-shop-empty { text-align: center; padding: 80px 0; }
.ng-shop-empty .ng-headline { font-size: 24px; color: var(--c-primary); margin-bottom: 12px; }
.ng-shop-empty p { color: var(--c-on-surface-variant); margin-bottom: 24px; }

/* Filter panels */
.ng-filter { display: flex; flex-direction: column; gap: 32px; }
.ng-filter__head { display: flex; align-items: center; justify-content: space-between; }
.ng-filter__head h3 { margin: 0; letter-spacing: .3em; font-size: 11px; color: var(--c-primary); }
.ng-filter__clear { font-size: 11px; color: var(--c-secondary); text-decoration: underline; text-underline-offset: 4px; }
.ng-filter__clear:hover { color: var(--c-primary); }
.ng-filter__group h4 { font-family: var(--font-headline); font-size: 15px; color: var(--c-primary); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(198,198,205,.3); }
.ng-filter__check, .ng-filter__radio { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 4px 0; }
.ng-filter__check input, .ng-filter__radio input { position: absolute; opacity: 0; pointer-events: none; }
.ng-filter__check-mark { width: 16px; height: 16px; border: 1px solid var(--c-outline-variant); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all .2s; }
.ng-filter__check input:checked + .ng-filter__check-mark { background: var(--c-primary); border-color: var(--c-primary); }
.ng-filter__check input:checked + .ng-filter__check-mark::after { content: ''; width: 8px; height: 4px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg) translateY(-1px); }
.ng-filter__radio-mark { width: 16px; height: 16px; border: 1px solid var(--c-outline-variant); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ng-filter__radio input:checked + .ng-filter__radio-mark { border-color: var(--c-primary); }
.ng-filter__radio input:checked + .ng-filter__radio-mark::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--c-primary); }
.ng-filter__check-label, .ng-filter__radio-label { font-size: 14px; color: var(--c-on-surface); flex: 1; }
.ng-filter__check-count { font-size: 11px; color: var(--c-on-surface-variant); }
.ng-filter__group input[type="range"] { width: 100%; accent-color: var(--c-primary); }
.ng-filter__range-labels { display: flex; justify-content: space-between; font-size: 11px; color: var(--c-on-surface-variant); margin-top: 4px; letter-spacing: .1em; }
.ng-filter__range-labels span:last-child { color: var(--c-primary); }
.ng-filter__apply {
	width: 100%; background: #070e22 !important; color: #ffffff !important;
	border: 1px solid #070e22 !important;
	padding: 12px; font-size: 11px; letter-spacing: .25em; font-weight: 600;
	text-transform: uppercase; transition: background .2s;
}
.ng-filter__apply:hover { background: #ecb5b5 !important; color: #070e22 !important; border-color: #ecb5b5 !important; }

/* Mobile filter sheet */
.ng-shop-filter-sheet { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.ng-shop-filter-sheet.is-open { pointer-events: auto; }
.ng-shop-filter-sheet__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); opacity: 0; transition: opacity .3s; }
.ng-shop-filter-sheet.is-open .ng-shop-filter-sheet__backdrop { opacity: 1; }
.ng-shop-filter-sheet__panel {
	position: absolute; left: 0; right: 0; bottom: 0; max-height: 85vh; overflow-y: auto;
	background: var(--c-surface-lowest); padding: 24px; border-radius: 16px 16px 0 0;
	transform: translateY(100%); transition: transform .4s cubic-bezier(.22,1,.36,1);
}
.ng-shop-filter-sheet.is-open .ng-shop-filter-sheet__panel { transform: translateY(0); }
.ng-shop-filter-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.ng-shop-filter-sheet__head .ng-headline { font-size: 20px; color: var(--c-primary); }
@media (min-width: 768px) { .ng-shop-filter-sheet { display: none; } }