.collection-banner{background:#fff;border-bottom:1px solid var(--color-border);padding:28px 0 24px}.collection-banner--has-image{background-size:cover;background-position:center;position:relative;padding:60px 0 48px}.collection-banner__overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#00000073}.collection-banner--has-image .collection-banner__inner{position:relative;z-index:1}.collection-banner--has-image .collection-banner__title{color:#fff}.collection-banner--has-image .collection-banner__description{color:#ffffffd9}.collection-banner__inner{display:flex;flex-direction:column;gap:8px}.collection-banner__title{font-size:clamp(1.4rem,4vw,2rem);font-weight:800;color:var(--color-text)}.collection-banner__description{font-size:.9375rem;color:var(--color-text-muted);max-width:600px}.collection-layout{display:grid;gap:24px;padding:20px 0 var(--section-spacing)}@media(min-width:768px){.collection-layout{grid-template-columns:240px 1fr;align-items:start}}.mobile-filter-drawer .overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;opacity:0;transition:opacity .3s;z-index:calc(var(--z-drawer) - 1)}.mobile-filter-drawer.is-open .overlay{opacity:1}.collection-filters{background:var(--color-surface);border-radius:var(--radius-md);padding:0;box-shadow:var(--shadow-sm);position:sticky;top:calc(var(--sticky-top, 0px) + var(--toolbar-height, 0px) + 16px);max-height:calc(100vh - var(--sticky-top, 0px) - var(--toolbar-height, 0px) - 32px);overflow-y:auto}.filter-header{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 12px;border-bottom:1px solid var(--color-border);font-size:.9375rem;font-weight:700}.filter-clear-all{font-size:.8125rem;color:var(--color-primary);cursor:pointer;background:none;border:none;font-weight:500;text-decoration:underline;text-underline-offset:2px}.filter-group{border-bottom:1px solid var(--color-border)}.filter-group:last-child{border-bottom:none}.filter-group__trigger{width:100%;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;font-size:.875rem;font-weight:600;color:var(--color-text);cursor:pointer;background:none;border:none;text-align:left}.filter-group__trigger:hover{color:var(--color-primary)}.filter-group__trigger svg{flex-shrink:0;transition:transform var(--transition)}.filter-group.is-open .filter-group__trigger svg{transform:rotate(180deg)}.filter-group__body{padding:0 16px 14px;display:none}.filter-group.is-open .filter-group__body{display:block}.filter-option{display:flex;align-items:center;gap:8px;padding:6px 0;cursor:pointer;font-size:.875rem;color:var(--color-text)}.filter-option input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-primary);cursor:pointer;flex-shrink:0}.filter-option:hover{color:var(--color-primary)}.filter-option__count{font-size:.75rem;color:var(--color-text-muted);margin-left:auto}.filter-price-inputs{display:flex;gap:8px;align-items:center;margin-top:8px}.filter-price-inputs input{flex:1;padding:8px 10px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;width:0}.filter-price-inputs input:focus{outline:none;border-color:var(--color-primary)}.collection-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0 16px;border-bottom:1px solid var(--color-border);margin-bottom:16px;position:sticky;top:var(--sticky-top, 0px);background:#fff;z-index:50}.collection-toolbar__left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.collection-toolbar__count{font-size:.875rem;color:var(--color-text-muted)}.collection-toolbar__filter-btn{display:flex;align-items:center;gap:6px;padding:8px 14px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;font-weight:600;cursor:pointer;background:var(--color-surface);color:var(--color-text);transition:border-color var(--transition),color var(--transition)}.collection-toolbar__filter-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}@media(min-width:768px){.collection-toolbar__filter-btn{display:none}}.collection-sort{display:flex;align-items:center;gap:8px}.collection-sort label{font-size:.875rem;color:var(--color-text-muted);white-space:nowrap}.collection-sort select{padding:8px 36px 8px 12px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);font-size:.875rem;cursor:pointer;background:var(--color-surface);color:var(--color-text)}.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.active-filter-pill{display:flex;align-items:center;gap:6px;padding:4px 10px 4px 12px;background:#cc000014;border:1px solid rgba(204,0,0,.2);border-radius:var(--radius-pill);font-size:.8125rem;font-weight:500;color:var(--color-primary)}.active-filter-pill button{background:none;border:none;cursor:pointer;color:var(--color-primary);padding:0;line-height:1;display:flex;align-items:center}.mobile-filter-drawer{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-drawer);display:flex;align-items:flex-end;pointer-events:none}.mobile-filter-drawer.is-open{pointer-events:all}.mobile-filter-drawer__panel{background:var(--color-surface);width:100%;max-height:85vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow-y:auto;transform:translateY(100%);transition:transform var(--transition-slow)}.mobile-filter-drawer.is-open .mobile-filter-drawer__panel{transform:translateY(0)}.mobile-filter-drawer__header{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--color-border);font-weight:700;font-size:1rem}.mobile-filter-drawer__body{padding:8px 20px 20px}.mobile-filter-drawer__footer{padding:16px 20px;border-top:1px solid var(--color-border);display:flex;gap:12px}.collection-grid__inner{min-height:200px;position:relative}.collection-grid__inner.is-loading:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffffa6;z-index:2}.collection-grid__inner.is-loading:before{content:"";position:absolute;top:80px;left:50%;transform:translate(-50%);width:32px;height:32px;border:3px solid var(--color-border);border-top-color:var(--color-primary);border-radius:50%;animation:grid-spin .7s linear infinite;z-index:3}@keyframes grid-spin{to{transform:translate(-50%) rotate(360deg)}}.collection-empty{text-align:center;padding:60px 20px;color:var(--color-text-muted)}.collection-empty p{margin-bottom:20px}.product-card-skeleton{background:var(--color-surface);border-radius:var(--radius-md);overflow:hidden}.skeleton-image{aspect-ratio:4 / 3;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}.skeleton-text{height:12px;border-radius:var(--radius-pill);margin:12px 12px 8px;background:linear-gradient(90deg,#f0f0f0 25%,#e8e8e8,#f0f0f0 75%);background-size:200% 100%;animation:shimmer 1.4s infinite}.skeleton-text--short{width:60%}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.view-toggle{display:flex;gap:2px;border:1.5px solid var(--color-border);border-radius:var(--radius-sm);overflow:hidden}.view-toggle__btn{padding:6px 8px;background:none;border:none;cursor:pointer;color:var(--color-text-muted);display:flex;align-items:center;transition:background .15s,color .15s}.view-toggle__btn.is-active{background:var(--color-accent);color:#fff}.view-toggle__btn:not(.is-active):hover{background:#f5f5f5;color:var(--color-text)}@media(max-width:767px){.view-toggle{display:none}}.products-grid.is-list-view{grid-template-columns:1fr!important;gap:12px}.products-grid.is-list-view .product-card{flex-direction:row;height:auto}.products-grid.is-list-view .product-card__media{flex:0 0 180px;width:180px;aspect-ratio:1;border-radius:var(--radius-md) 0 0 var(--radius-md)}.products-grid.is-list-view .product-card__body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:16px 20px}.products-grid.is-list-view .product-card__quick-add{display:none}.products-grid.is-list-view .product-card__add-btn{display:block;margin-top:12px;max-width:200px;align-self:flex-start}
/*# sourceMappingURL=/cdn/shop/t/4/assets/component-collection.css.map */