.pack-artwork-picker{display:grid;grid-template-columns:40px minmax(0,1fr) 40px;align-items:center;gap:6px;padding:8px 12px;border-top:1px solid #e1e8f3;border-bottom:1px solid #e1e8f3;background:#f8faff}.pack-artwork-picker button{min-width:40px;min-height:40px;border:1px solid #c8d6eb;background:#fff;color:#17386b;font:700 25px/1 system-ui;border-radius:8px;cursor:pointer}.pack-artwork-status{font-size:13px;line-height:1.4;text-align:center;color:#385174;overflow-wrap:anywhere}.pack-artwork-gallery{padding:22px 0;border-top:1px solid #e1e8f3}.pack-artwork-gallery>p{line-height:1.6}.pack-artwork-thumbnails{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:12px;max-width:850px}.pack-artwork-thumbnails button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;background:#fff;border:1px solid #ccd9ee;border-radius:10px;cursor:pointer;color:#17386b;font:600 14px/1.4 system-ui}.pack-artwork-thumbnails button[aria-pressed=true]{border:2px solid #2259aa;background:#f0f5ff}.pack-artwork-thumbnails img{width:100%;height:155px;object-fit:contain}.pack-artwork-sources{font-size:14px}.pack-artwork-picker button:focus-visible,.pack-artwork-thumbnails button:focus-visible{outline:3px solid #2465bb;outline-offset:3px}.catalog-list .pack-artwork-picker,.catalog-compact .pack-artwork-picker{grid-column:1/-1}@media(max-width:480px){.pack-artwork-picker{padding:7px 6px;gap:3px}.pack-artwork-status{font-size:12px}.pack-artwork-thumbnails{grid-template-columns:repeat(2,minmax(0,1fr))}}

.pack-artwork-crop{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:var(--art-aspect);margin:auto}.pack-artwork-crop img{position:absolute!important;max-width:none!important;max-height:none!important;width:var(--art-width)!important;height:var(--art-height)!important;left:var(--art-left)!important;top:var(--art-top)!important;object-fit:fill!important}.pack-artwork-thumbnails .pack-artwork-crop{width:min(100%,calc(155px * var(--art-aspect)));height:auto;flex-shrink:0}.pack-artwork-thumbnails a{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border:1px solid #ccd9ee;border-radius:10px;color:#17386b;text-align:center;text-decoration:none;font-size:14px;line-height:1.4}.pack-artwork-thumbnails a img{width:100%;height:155px;object-fit:contain}

.pack-artwork-reference{margin:0;padding:10px 12px;border-block:1px solid #e1e8f3;font-size:13px;text-align:center}.pack-artwork-thumbnails figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 8px;border:1px solid #ccd9ee;border-radius:10px;font-size:14px;line-height:1.4;text-align:center}.pack-artwork-thumbnails figure img{width:100%;height:155px;object-fit:contain}

.has-pack-artwork{position:relative}.pack-artwork-active-label{position:absolute;bottom:5px;inset-inline:6px;padding:4px 6px;background:#fffffff0;color:#385174;font:12px/1.35 system-ui;text-align:center;border-radius:5px}

/* Match the actual catalog-view attribute and keep picker rows below both columns. */
html[data-catalog-view=list] #catalog .card:has(>.pack-artwork-picker,>.pack-artwork-reference)>.photo{grid-column:1;grid-row:1}
html[data-catalog-view=list] #catalog .card:has(>.pack-artwork-picker,>.pack-artwork-reference)>.card-body{grid-column:2;grid-row:1}
html[data-catalog-view=list] #catalog .card>:is(.pack-artwork-picker,.pack-artwork-reference){grid-column:1/-1;grid-row:2;min-width:0}
.photo .pack-artwork-crop{width:min(100%,calc(178px * var(--art-aspect)));flex-shrink:0}.photo:hover .pack-artwork-crop img{transform:none}.photo .captioned-photo-art .pack-artwork-crop{width:min(100%,calc(150px * var(--art-aspect)))}
.product-hero .pack-artwork-crop{width:min(100%,calc(320px * var(--art-aspect)))}.detail-layout>div:first-child .pack-artwork-crop{width:min(100%,calc(300px * var(--art-aspect)))}
html[data-catalog-view=compact] #catalog .pack-artwork-crop{width:min(100%,calc(130px * var(--art-aspect)))}
html[data-catalog-view=list] #catalog .pack-artwork-crop{width:min(100%,calc(144px * var(--art-aspect)))}
.pack-artwork-thumbnails a:focus-visible{outline:3px solid #2465bb;outline-offset:3px}
@media(max-width:640px){.photo .pack-artwork-crop{width:min(100%,calc(130px * var(--art-aspect)))}.photo .captioned-photo-art .pack-artwork-crop{width:min(100%,calc(110px * var(--art-aspect)))}html[data-catalog-view=compact] #catalog .pack-artwork-crop{width:min(100%,calc(110px * var(--art-aspect)))}html[data-catalog-view=list] #catalog .pack-artwork-crop{width:min(100%,calc(120px * var(--art-aspect)))}.product-hero .pack-artwork-crop{width:min(100%,calc(250px * var(--art-aspect)))}.detail-layout>div:first-child .pack-artwork-crop{width:min(100%,calc(230px * var(--art-aspect)))}}