/* Compact presentation without cropping product artwork or hiding instructions. */
.products-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.product-carousel{grid-auto-columns:calc((100% - 48px)/4)}
.product-card{min-width:0}
.product-card h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;font-size:16px}
.product-card .product-image{height:auto;aspect-ratio:4/5;background:#fff}
.product-card .product-image img{width:100%;height:100%;object-fit:cover}
.product-card .card-actions{min-width:0;flex-wrap:wrap}
.purchase-state{display:grid;gap:8px;font-size:14px}
.reference-product-hero{max-width:1120px;grid-template-columns:minmax(0,1.15fr) minmax(360px,1fr);gap:28px;margin:20px auto}
.reference-main,.reference-use-card{min-width:0}
.reference-main>h1{font-size:32px;line-height:1.3;margin:12px 0}
.reference-main>img{display:block;width:min(100%,440px);height:auto;max-height:none;aspect-ratio:4/5;object-fit:cover;margin:0 auto;cursor:zoom-in;background:#fff}
.reference-use-card{font-size:16px;padding:20px;align-self:start;max-height:none}
.reference-use-card p,.reference-use-card small,.reference-use-card li{font-size:14px;line-height:1.65}
.reference-use-card pre,.reference-use-card code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word;max-width:100%;font-size:13px}
.reference-use-card .reference-activation strong{font-size:15px}
.reference-main>img:focus-visible{outline:3px solid #176de5;outline-offset:4px}
.reference-use-card button,.reference-use-card .link-button,.context-back{min-height:44px}
.context-back{display:inline-flex;align-items:center;margin:8px 0}
.library-product-open{padding:12px;grid-template-columns:56px minmax(0,1fr) auto;gap:12px}
.library-product-open img{width:56px;height:56px;object-fit:contain}
.library-product-open strong{font-size:16px}.library-product-open em{font-size:14px}
.cart-owned{padding:12px;border:1px solid #c9d9ef;border-radius:12px;margin:10px 0;display:grid;gap:8px;background:#f3f8ff}
.cart-owned small{font-size:14px}.product-image-dialog{max-width:900px}.product-image-dialog img{max-width:100%;max-height:75vh;object-fit:contain}
.admin-main .panel{padding:22px}.admin-main button,.admin-main input,.admin-main select{min-height:44px}
.admin-main table{font-size:14px}.admin-main td,.admin-main th{padding:12px}
.home-banner-shell{margin-top:16px;margin-bottom:12px}
.home-banner-shell .topbar{min-height:64px;padding-top:10px;padding-bottom:10px}
.home-banner-shell .hero-banner{min-height:100px!important}
.home-banner-shell .hero-copy{padding-top:12px;padding-bottom:12px}
.home-banner-shell .hero-copy h1{font-size:28px}
@media(max-width:760px){.home-banner-shell .hero-art{display:none}.home-banner-shell .hero-copy h1{font-size:22px}.home-banner-shell .header-actions{display:flex;flex-wrap:wrap}.home-banner-shell .header-action{flex:1}.home-banner-shell .hero-copy{padding:12px 16px}}
@media(min-width:1600px){.products-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.product-carousel{grid-auto-columns:calc((100% - 64px)/5)}}
@media(max-width:960px){.products-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.product-carousel{grid-auto-columns:calc((100% - 28px)/3)}.reference-product-hero{gap:20px;grid-template-columns:minmax(0,1fr) minmax(300px,1fr)}}
@media(max-width:760px){.reference-product-hero{display:flex;flex-direction:column;margin:12px auto}.reference-main{display:contents}.reference-breadcrumb{order:0}.reference-main>h1{order:1;font-size:26px}.reference-summary{order:2}.reference-use-card{order:3;width:100%;box-sizing:border-box;position:static}.reference-main>img{order:4;width:min(100%,360px);height:auto;max-height:none}.reference-includes{order:5;width:100%}.reference-reading{order:6;width:100%}.library-product-open{grid-template-columns:48px minmax(0,1fr)}.library-product-open em{grid-column:2}.admin-main .panel{padding:16px}}
@media(max-width:560px){.products-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-carousel{grid-auto-columns:calc((100% - 12px)/2)}.product-card h3{font-size:15px}.product-card button,.product-card .link-button{min-height:44px;padding:8px;font-size:14px}.product-card .purchase-state small{display:none}}
@media(max-width:760px){
 .reference-product-hero{gap:12px}
 .reference-main>.reference-breadcrumb,.reference-main>h1,.reference-main>.reference-summary{margin:0}
 body:has(.reference-product-hero) .home-banner-shell .hero-banner{min-height:54px!important}
 body:has(.reference-product-hero) .home-banner-shell .hero-copy h1{font-size:18px;margin:0}
 body:has(.reference-product-hero) .home-banner-shell .hero-copy>p{display:none}
}