/*
 * potensic/assets/css/collection.css
 * Collection (product archive) pages — 1:1 port of the Shopify Enterprise 1.6.1
 * stylesheets collection-banner.css, products-grid.css, facet-filters.css and
 * price-range.css, plus the collection-specific rules of main.css.
 *
 * Source of truth: docs/spec/04-collection.md §2.1–§2.8, §5.
 *
 * Nothing here re-declares a shared component: the card, price, rating,
 * disclosure, checkbox, slider, pagination and product-label rules already live
 * in components.css, and every layout helper (grid-cols-*, gap-*, flex-*) comes
 * from utilities.css. Drawer chrome is scoped to `.facets` on purpose so the
 * cart/search drawers can own the generic `.drawer` namespace.
 *
 * Breakpoints: sm ≥600 · md ≥769 · lg ≥1024 · xl ≥1280.
 */


/* ==========================================================================
   1. Collection banner (§2.1)
   ========================================================================== */

.collection-banner__content.color-scheme{padding:var(--gutter-sm, 20px)}
.collection-banner__content.color-scheme h1{padding-top:calc(4 * var(--space-unit))}
.collection-banner__media{order:2}
.collection-banner__heading{margin-inline-end:5px}
.collection-banner__count{color:rgba(var(--heading-color)/.6);font-size:1.4rem;line-height:1.4rem;white-space:nowrap}
@media(min-width:600px) {
	.collection-banner__content--with-media{padding-inline-end:calc(8 * var(--space-unit))}
	.collection-banner__content.color-scheme{padding:calc(10 * var(--space-unit))}
	.collection-banner__content.color-scheme h1{padding-top:calc(2 * var(--space-unit))}
}
@media(min-width:769px) {
	.collection-banner__content{width:50%;min-width:400px}
	.collection-banner__content.color-scheme{padding:calc(12 * var(--space-unit))}
	.collection-banner__content-wide{width:66%}
}
@media(min-width:1024px) {
	.collection-banner__content--with-media.text-start,
	.collection-banner__content--with-media.panel.text-start{padding-inline-end:112px}
}


/* ==========================================================================
   2. Products toolbar (§2.3)
   ========================================================================== */

.products-toolbar{position:relative;padding-bottom:calc(4 * var(--space-unit));border:solid rgba(var(--text-color)/.15);border-width:0 0 1px}
.products-toolbar__filter .icon{margin-inline-start:calc(4 * var(--space-unit));fill:rgba(var(--bg-color))}
.products-toolbar__layout{margin-inline-end:-8px}
.products-toolbar__layout .label{margin-inline-end:4px}
.products-toolbar__layout>label{padding:8px;transition:color .3s;color:rgba(var(--text-color)/.5);line-height:1em;cursor:pointer}
.products-toolbar__layout input:checked+label{color:rgb(var(--text-color))}
.products-toolbar__filter-btn circle{transition:transform .3s,color .3s}
.products-toolbar__filter-btn:not(.is-active) circle:nth-of-type(1){transform:translate(6px);color:rgba(var(--text-color)/.8)}
.products-toolbar__filter-btn:not(.is-active) circle:nth-of-type(2){transform:translate(-6px);color:rgba(var(--text-color)/.8)}
.products-toolbar__sort .custom-select__btn{margin-inline-end:30px;padding:0;font-weight:400}
.products-toolbar__sort .custom-select__btn>.icon{margin-inline-start:0;margin-inline-end:0;padding-inline-start:0}
body:not(.tab-used) .products-toolbar__sort .custom-select__btn{border:0;box-shadow:none}
.cc-collection-products hr{margin:calc(6 * var(--space-unit)) 0;border:0;border-top:1px solid rgba(var(--text-color)/.15)}
@media(max-width:768.98px) {
	.products-toolbar{justify-content:space-between}
	.products-toolbar__filter{padding-inline-end:10px}
	.products-toolbar__filter-btn{padding:9px 24px;border:var(--btn-border-width) solid rgba(var(--text-color)/.15);border-radius:var(--btn-border-radius, 0);font-size:.88em;font-weight:700;line-height:1.2em;text-align:start}
}
@media(min-width:600px) {
	.products-toolbar .label,
	.products-toolbar label,
	.products-toolbar .custom-select__btn,
	.products-toolbar .products-toolbar__filter-btn{font-size:1em}
	.products-toolbar__sort{white-space:nowrap}
	.products-toolbar__sort custom-select{display:flex;align-items:center}
	.products-toolbar__sort .custom-select{position:relative;top:1px}
	.products-toolbar__sort label{margin:0;padding-inline-end:12px}
	.products-toolbar__sort .custom-select__btn{height:35px}
}
@media(min-width:769px) {
	.products-toolbar{padding-top:calc(4 * var(--space-unit));border-width:1px 0}
	.products-toolbar__filter+.products-toolbar__sort{margin-inline-start:calc(6 * var(--space-unit));padding-inline-start:calc(6 * var(--space-unit));border-inline-start:1px solid rgba(var(--text-color)/.15)}
}
@media(max-width:1023.98px) {
	.products-toolbar__layout .label{display:none}
}


/* ==========================================================================
   3. Grid shell: sidebar column + results column (§2.2, §2.4)
   ========================================================================== */

.main-products-grid{flex-wrap:nowrap}
.main-products-grid__results{min-width:0}
.main-products-grid__results>.grid{transition:opacity .4s ease}
.main-products-grid__results.is-loading>.grid{opacity:.4;pointer-events:none}
.main-products-grid__results.is-loading:after{top:calc(50% - 24px);right:calc(50% - 24px);width:48px;height:48px;border-width:3px}
.main-products-grid__results.is-loading:before{display:none}
@media(min-width:1024px) {
	.js .lg\:js-hidden{display:none}
	.main-products-grid__filters{flex:0 0 calc(241px + 8 * var(--space-unit));margin-inline-end:calc(8 * var(--space-unit));padding-bottom:calc(12 * var(--space-unit));padding-inline-end:calc(8 * var(--space-unit));border-inline-end:1px solid rgba(var(--text-color)/.15)}
	.main-products-grid--contained .main-products-grid__filters{margin-inline-end:calc(8 * var(--space-unit))}
}
@media(min-width:1280px) {
	.main-products-grid__filters{flex:0 0 calc(241px + 12 * var(--space-unit));margin-inline-end:calc(12 * var(--space-unit));padding-inline-end:calc(12 * var(--space-unit))}
	.main-products-grid--contained .main-products-grid__filters{margin-inline-end:calc(8 * var(--space-unit))}
}


/* ==========================================================================
   4. Facet filters — drawer below 1024, static sidebar above (§2.4)
   ========================================================================== */

.facets.drawer{
	visibility:hidden;
	position:fixed;
	z-index:40;
	top:0;
	left:0;
	width:100%;
	max-width:550px;
	height:var(--viewport-height, 100vh);
	overflow:hidden;
	transition:visibility 0s .6s,transform .7s cubic-bezier(.19,1,.22,1);
	border-radius:0;
	background-color:rgba(var(--drawer-bg-color));
	color:rgb(var(--drawer-text-color));
}
.facets.drawer:not([open]){transform:translate3d(-100%,0,0)}
.facets.drawer[open]{visibility:visible;transition:transform .7s cubic-bezier(.19,1,.22,1);transform:translateZ(0)}
.facets .drawer__header{flex-shrink:0;padding:var(--gutter-sm, 20px);border-bottom:1px solid rgba(var(--text-color)/.2)}
.facets .drawer__close-btn{margin:-10px;padding:10px;color:currentColor}
.facets .drawer__content{flex:1 1 auto;padding:var(--gutter-sm, 20px);overflow:auto}
.facets .drawer__footer{position:sticky;bottom:0;flex-shrink:0;padding:var(--gutter-sm, 20px);background-color:rgba(var(--drawer-bg-color));box-shadow:0 -2px 8px rgba(0,0,0,.08)}
.facets .disclosure{margin:0 2px;border-bottom:1px solid rgba(var(--text-color)/.15)}
.facets__active-filters>.disclosure{margin-top:calc(6 * var(--space-unit) * -1);margin-bottom:calc(6 * var(--space-unit))}
.facets__filters{margin-top:calc(6 * var(--space-unit) * -1);transform:translateZ(0)}
.facets__filters>details-disclosure:last-of-type .disclosure{border:0}
details-disclosure{display:block}
.facets .disclosure>summary{cursor:pointer;list-style:none}
.facets .disclosure>summary::-webkit-details-marker{display:none}
.filter li:not(:last-child){margin-bottom:calc(4 * var(--space-unit))}
.filter__label{line-height:1.5}
input[disabled]+.filter__label{opacity:.5}
.filter__count{margin-inline-start:calc(3 * var(--space-unit));white-space:nowrap}
.active-filter{margin-bottom:calc(4 * var(--space-unit));margin-inline-end:calc(6 * var(--space-unit))}
.active-filter>.icon{flex-shrink:0;width:24px;height:24px;margin-inline-end:calc(2 * var(--space-unit));padding:4px;border-radius:50%;stroke-width:2px;stroke:rgba(var(--bg-color));background-color:rgb(var(--text-color));pointer-events:none}
.disclosure__show-more{margin-top:calc(2 * var(--space-unit))}
.disclosure__show-more:has(.filter__more),
.disclosure__show-more:has(.js-clear-filter:not([hidden])){margin-top:calc(6 * var(--space-unit))}
.facets__footer .btn{padding:var(--btn-padding-y, 12px) 26px}
@media(min-width:769px) {
	.facets .drawer__header,
	.facets .drawer__content,
	.facets .drawer__footer{padding:calc(6 * var(--space-unit)) calc(8 * var(--space-unit))}
}
@media(min-width:1024px) {
	.facets.drawer{visibility:visible;position:static;width:auto;max-width:none;height:auto;transition:none;background:none;color:currentColor}
	sticky-scroll-direction .facets.drawer{position:sticky;z-index:0;top:var(--header-end, 0)}
	.facets.drawer:not([open]){transform:none}
	.facets .drawer__content{padding:0;overflow:visible}
	/* The custom element must not become the sticky containing block: it is only
	   as tall as the facet list, which would pin the sidebar immediately. Matching
	   the source theme, the sticky ancestor stays .main-products-grid__filters. */
	sticky-scroll-direction{display:block;height:100%}
}


/* ==========================================================================
   5. Price range (§2.4, price-range.css)
   ========================================================================== */

.price-range__input-wrapper{padding:11px 16px;border-radius:var(--input-border-radius, 27px);background-color:rgb(var(--input-bg-color));box-shadow:inset 0 0 0 var(--input-border-width) rgba(var(--input-text-color)/.2)}
.price-range__input-wrapper:focus-within{box-shadow:inset 0 0 0 var(--input-border-width) rgba(var(--input-text-color)/.6)}
.price-range__currency{padding:0 2px;font-size:.88em;white-space:nowrap}
.price-range__input-wrapper .input{width:100%;padding:0 2px;border:0;outline:0;background:none;box-shadow:none;font-size:.88em;line-height:1.5}
.price-range__input-wrapper .input:focus{border:0;box-shadow:none;outline:0}
.price-range__input-separator{margin:0 6px}
.price-range__sliders{height:28px;margin-top:28px;background:linear-gradient(currentColor,currentColor) no-repeat center/100% 2px}
.price-range__slider-input{
	position:absolute;
	top:0;
	left:0;
	width:calc(100% + 16px);
	height:28px;
	margin:0 -8px;
	padding:0;
	border:0;
	background:none;
	pointer-events:none;
	cursor:grab;
	-webkit-appearance:none;
	appearance:none;
}
.price-range__slider-input:focus{outline:0}
.price-range__slider-input::-webkit-slider-runnable-track{height:28px;border:0;background:none}
.price-range__slider-input::-moz-range-track{height:28px;border:0;background:none}
.price-range__slider-input::-webkit-slider-thumb{
	width:40px;
	height:40px;
	border:8px solid transparent;
	border-radius:50%;
	background-clip:padding-box;
	background-color:rgba(var(--bg-color));
	box-shadow:inset 0 0 0 2px rgb(var(--text-color));
	transition:.3s;
	pointer-events:auto;
	cursor:grab;
	-webkit-appearance:none;
	appearance:none;
}
.price-range__slider-input::-moz-range-thumb{
	box-sizing:border-box;
	width:40px;
	height:40px;
	border:8px solid transparent;
	border-radius:50%;
	background-clip:padding-box;
	background-color:rgba(var(--bg-color));
	box-shadow:inset 0 0 0 2px rgb(var(--text-color));
	transition:.3s;
	pointer-events:auto;
	cursor:grab;
}
.price-range__slider-input::-webkit-slider-thumb:hover{box-shadow:inset 0 0 0 2px rgb(var(--link-color))}
.price-range__slider-input::-moz-range-thumb:hover{box-shadow:inset 0 0 0 2px rgb(var(--link-color))}


/* ==========================================================================
   6. Product grid (§2.5)
   ========================================================================== */

.main-products-grid[data-layout=list] .grid{grid-template-columns:none}
/* List view card geometry (§2.5, spec line "列表视图"). */
.main-products-grid[data-layout=list] .card--product{flex-direction:row;max-width:none;padding-top:24px}
.main-products-grid[data-layout=list] .card--product .card__media{flex:0 0 calc(50% - 40px);margin-inline-end:20px}
.main-products-grid[data-layout=list] .card--product .card__info-container{display:flex;flex-direction:column;justify-content:center}
@media(min-width:769px) {
	.main-products-grid[data-layout=list] .card--product{padding-top:40px}
	.main-products-grid[data-layout=list] .card--product .card__media{flex:0 0 calc(33.333% - 32px);max-width:245px;margin-inline-end:40px}
	.main-products-grid[data-layout=list] .card--product .card__info-container{flex-direction:row;align-items:center}
}
@media(max-width:768.98px) {
	.main-products-grid[data-layout=grid] .grid-cols-2{
		margin-top:calc(8 * var(--space-unit) * -1 - 1px);
		margin-right:calc(var(--gutter) * -1);
		margin-left:calc(var(--gutter) * -1);
		column-gap:0;
		row-gap:0;
		border-top:1px solid rgba(var(--text-color)/.15);
		border-bottom:1px solid rgba(var(--text-color)/.15);
		background-color:rgba(var(--bg-color));
	}
	.main-products-grid[data-layout=grid] .grid-cols-2>li{border:solid rgba(var(--text-color)/.15);border-width:0 1px 1px 0}
	.main-products-grid[data-layout=grid] .grid-cols-2 .card{padding:16px}
	.main-products-grid[data-layout=grid] .grid-cols-2 .card--product-contained{border-width:0}
}


/* --- Card typography the spec pins to the body scale (§2.6). ---------- */
.card.card--product .card__subtitle{line-height:1.5}


/* ==========================================================================
   7. Pagination (§2.7) — the rest lives in components.css
   ========================================================================== */

.pagination{margin-top:0}
.pagination__arrow{padding:0}
.pagination__arrow[aria-disabled=true]{cursor:default}
.pagination__page-link,.pagination__page-current{display:block}
@media(min-width:1280px) {
	.pagination__arrow{padding:0 26px}
}