.category-list{min-width:0;max-width:100%;overflow-x:auto;padding-bottom:4px}
.category-button{flex-shrink:0}
.product-card{display:flex;flex-direction:column;min-width:0}
.product-content{display:flex;flex-direction:column;flex:1;min-width:0}
.product-title-row{flex-wrap:wrap;align-items:flex-start;min-height:44px}
.product-title-row h3{min-width:0;max-width:100%;overflow-wrap:anywhere}
.product-title-row .duration{max-width:100%;white-space:normal;line-height:1.4}
.product-content>p{margin-bottom:12px;overflow-wrap:anywhere}
.product-price-row{margin-top:auto}
.product-art.art-generic>img{filter:none;max-width:108px;max-height:70px}
.product-art .product-type{max-width:calc(100% - 55px);overflow-wrap:anywhere}
@media(max-width:760px){.product-art.art-generic>img{max-width:88px;max-height:60px}.product-title-row{min-height:54px}}

/* Product logos are always pure black in the catalog. */
#product-grid .product-art>img{filter:brightness(0);opacity:1}

.catalog-type-filter{display:flex;align-items:center;gap:16px;margin:0 0 18px}
.catalog-type-label{font-size:11px;color:#777}
.catalog-type-list{display:flex;flex-wrap:wrap;gap:8px}
.catalog-type-list .category-button{padding:9px 15px;font-size:11px}
@media(max-width:760px){.catalog-type-filter{align-items:flex-start;gap:10px;margin-bottom:16px}.catalog-type-label{padding-top:10px;font-size:10px}.catalog-type-list{gap:6px}.catalog-type-list .category-button{padding:9px 10px;font-size:10px}}

/* A single filter panel: type switch above, category chips below. */
.catalog-filters{margin-top:24px;padding:18px 22px;background:#fff;border:1px solid #e3e3e3;border-radius:16px}
.catalog-filters .catalog-type-filter,
.catalog-filters .catalog-toolbar{display:grid;grid-template-columns:88px minmax(0,1fr);align-items:center;gap:18px;margin:0}
.catalog-filters .catalog-toolbar{margin-top:16px;padding-top:16px;border-top:1px solid #ededed}
.catalog-filters .catalog-type-label,
.catalog-filters .catalog-category-label{padding:0;font-size:12px;font-weight:500;color:#686868}
.catalog-filters .catalog-type-list{display:inline-flex;justify-self:start;flex-wrap:nowrap;gap:4px;padding:4px;background:#f2f2f2;border-radius:11px}
.catalog-filters .catalog-type-list .category-button{min-height:38px;padding:9px 20px;border:0;border-radius:8px;font-size:12px;color:#696969;background:transparent}
.catalog-filters .catalog-type-list .category-button[aria-pressed="true"]{background:#222;color:#fff;box-shadow:0 2px 4px #00000012}
.catalog-filters .catalog-type-list .category-button:hover:not([aria-pressed="true"]){background:#e7e7e7;color:#222}
.catalog-filters .category-list{width:auto;display:flex;flex-wrap:wrap;gap:8px;overflow:visible;padding:0}
.catalog-filters .category-list .category-button{min-height:38px;padding:9px 15px;font-size:11px;border-radius:8px;background:#fff;border-color:#e5e5e5;color:#555;white-space:normal;text-align:center}
.catalog-filters .category-list .category-button[aria-pressed="true"]{background:#fff1f2;border-color:#f1bfc2;color:#bd000b}
.catalog-filters .category-list .category-button:hover:not([aria-pressed="true"]){background:#f6f6f6;border-color:#bbb;color:#222}
.catalog-results-row{display:flex;justify-content:flex-end;padding:14px 2px 16px}
.catalog-results-row .catalog-results{font-size:11px;color:#777}
@media(max-width:760px){
 .catalog-filters{margin-top:22px;padding:16px;border-radius:13px}
 .catalog-filters .catalog-type-filter,.catalog-filters .catalog-toolbar{grid-template-columns:minmax(0,1fr);gap:10px}
 .catalog-filters .catalog-type-label,.catalog-filters .catalog-category-label{font-size:11px}
 .catalog-filters .catalog-type-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));justify-self:stretch;gap:2px}
 .catalog-filters .catalog-type-list .category-button{min-height:40px;padding:8px 3px;font-size:10px;white-space:nowrap}
 .catalog-filters .category-list{gap:7px}
 .catalog-filters .category-list .category-button{min-height:36px;padding:8px 10px;font-size:10px}
 .catalog-filters .catalog-toolbar{margin-top:14px;padding-top:14px}
 .catalog-results-row{padding:12px 1px 14px}
 .catalog-results-row .catalog-results{font-size:10px}
}

/* In-flow disclosure: opening pushes the catalog down, never covers it. */
.catalog-results-row{align-items:center;justify-content:space-between;margin-top:24px;padding:0 0 16px;gap:16px}
.filter-toggle{display:inline-flex;align-items:center;gap:9px;min-height:42px;padding:10px 14px;border:1px solid #dcdcdc;border-radius:10px;background:#fff;color:#222;font-size:12px;font-weight:500;transition:background .2s,color .2s}
.filter-toggle:hover{background:#eaeaea}
.filter-toggle[aria-expanded="true"]{background:#222;border-color:#222;color:#fff}
.filter-toggle svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.filter-toggle .filter-chevron{width:14px;height:14px;margin-left:7px;transition:transform .25s}
.filter-toggle[aria-expanded="true"] .filter-chevron{transform:rotate(180deg)}
.filter-count{min-width:18px;height:18px;display:grid;place-items:center;border-radius:5px;background:#e9e9e9;color:#222;font-size:10px}
.catalog-filter-disclosure{display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .28s ease,opacity .2s ease,visibility .28s;overflow-anchor:none}
.catalog-filter-disclosure.is-open{grid-template-rows:1fr;opacity:1;visibility:visible}
.catalog-filter-clip{min-height:0;overflow:hidden}
.catalog-filter-disclosure .catalog-filters{margin:0 0 20px;padding:18px;border-radius:13px}
.catalog-filter-disclosure .catalog-type-filter,.catalog-filter-disclosure .catalog-toolbar{display:block}
.catalog-filter-disclosure .catalog-type-list{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:min(100%,480px);gap:0;padding:4px}
.catalog-filter-disclosure .catalog-type-list::before{content:"";position:absolute;z-index:-1;top:4px;bottom:4px;left:4px;width:calc((100% - 8px)/4);border-radius:8px;background:#222;box-shadow:0 2px 4px #00000012;transform:translateX(calc(var(--type-index,0)*100%));transition:transform .25s ease}
.catalog-filter-disclosure .catalog-type-list .category-button{min-height:42px;padding:10px 8px;background:transparent;box-shadow:none}
.catalog-filter-disclosure .catalog-type-list .category-button[aria-pressed="true"]{background:transparent;box-shadow:none;color:#fff}
.catalog-filter-disclosure .catalog-type-list .category-button:hover:not([aria-pressed="true"]){background:#00000005}
.catalog-filter-disclosure .category-list .category-button[aria-pressed="true"]{background:#e5e5e5;border-color:#d5d5d5;color:#222}
@media(max-width:760px){
 .catalog-results-row{margin-top:20px}
 .catalog-filter-disclosure .catalog-filters{padding:14px;margin-bottom:16px}
 .catalog-filter-disclosure .catalog-type-list .category-button{padding:9px 2px;font-size:10px}
}
@media(prefers-reduced-motion:reduce){.catalog-filter-disclosure,.filter-toggle,.filter-chevron,.catalog-filter-disclosure .catalog-type-list::before{transition:none!important}}

.catalog-filter-disclosure .catalog-toolbar{border-top:0;padding-top:0;margin-top:16px}

/* The trigger becomes the top tab of the same white filter surface. */
.catalog-results-row{transition:padding-bottom .28s ease}
.catalog-results-row:has(.filter-toggle[aria-expanded="true"]){padding-bottom:0}
.filter-toggle{position:relative;z-index:2;transition:background .2s,color .2s,border-color .2s,border-radius .28s}
.filter-toggle[aria-expanded="true"]{background:#fff;color:#222;border-color:#e3e3e3;border-bottom-color:#fff;border-radius:13px 13px 0 0;margin-bottom:-1px;min-height:48px}
.filter-toggle[aria-expanded="true"]:hover{color:#555}
.catalog-filter-disclosure .catalog-filters{border-top-left-radius:0;padding-top:20px}
.catalog-filter-disclosure{transform-origin:top left}
@media(prefers-reduced-motion:reduce){.catalog-results-row{transition:none}}

/* Readable duration badges on desktop catalog cards. */
@media(min-width:1024px){#product-grid .product-title-row .duration{font-size:9.9px;font-weight:500;line-height:1.4;padding:5.4px 8.1px;border-radius:5.4px;background:#f0f0f0;color:#555}}

/* Desktop category and SKU labels: 20% larger. */
@media(min-width:1024px){#product-grid .product-type,#product-grid .product-number{font-size:8.4px}#product-grid .product-type{letter-spacing:1.2px}}

/* Allow custom price labels to wrap without pushing the action outside the card. */
[data-catalog-price]{min-width:0;overflow-wrap:anywhere;white-space:normal}
.product-price-row{gap:12px}
.product-price-row>button,.product-price-row>a{flex-shrink:0}

.filter-toggle .filter-icon{display:block;width:18px;height:18px;flex:0 0 18px;}