/* Leave a separate footer for the reference; order controls keep their space. */
#trimlist{--trim-heading-height:48px}
#trimlist .product{position:relative;height:calc(466px + var(--trim-heading-height));padding-bottom:40px;grid-template-rows:24px var(--trim-heading-height) 30px 144px 48px 48px 44px 34px}
#trimlist .product>h3{font-family:inherit;font-size:12px;font-weight:700;font-style:normal;line-height:16px;letter-spacing:0;text-transform:uppercase;text-align:left;color:#242424;margin:0;padding:0;align-self:start;white-space:normal;overflow-wrap:anywhere}
.site-print-section .product[data-interest-category="trims"]>h3{text-transform:uppercase;font-weight:700;text-align:left}
#trimlist .product.trim-layout-editing{height:calc(512px + var(--trim-heading-height))}
.trim-card-reference{position:absolute;right:10px;bottom:8px;display:flex;align-items:center;justify-content:center;min-width:26px;height:24px;padding:0 6px;border:1px solid #cbd2d9;border-radius:5px;background:#f1f4f7;color:#263a50;font-size:13px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.trim-card-reference[hidden]{display:none}
.site-print-section .product[data-interest-category="trims"]{position:relative;padding-bottom:38px}


/* Size cards from their actual container, including the quote sidebar. Let notes
   and availability messages take their own rows instead of overlapping controls. */
#trimlist{grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));align-items:stretch}
#trimlist .product,#trimlist .product.trim-layout-editing{height:auto;grid-template-rows:auto var(--trim-heading-height) auto 144px auto auto auto auto auto auto auto;grid-template-areas:"sku sku" "title title" "status status" "drawing drawing" "notes notes" "measurements measurements" "gauge finish" "length color" "availability availability" "quantity price" "button button"}
#trimlist .product>small{grid-area:sku}
#trimlist .product>h3{grid-area:title}
#trimlist .product>.profile-status{grid-area:status}
#trimlist .product>.drawing-link,#trimlist .product>.approved-drip{grid-area:drawing}
#trimlist .product>p.trim-length-note{grid-area:notes;font-size:11px;line-height:1.4;align-self:start}
#trimlist .product>p.trim-measurements{grid-area:measurements;font-size:11px;line-height:1.4;align-self:start}
#trimlist .product>label.trim-gauge{grid-area:gauge}
#trimlist .product>label.trim-finish{grid-area:finish}
#trimlist .product>label.trim-length{grid-area:length}
#trimlist .product>label.trim-color{grid-area:color}
#trimlist .product>[id^="trim-availability-"]{grid-area:availability;min-width:0}
#trimlist .product>label.product-quantity{grid-area:quantity}
#trimlist .product>p:not([class]){grid-area:price;overflow-wrap:anywhere}
#trimlist .product>button{grid-area:button}
#trimlist .product>p,#trimlist .product .steel-availability-note{overflow-wrap:anywhere}