/* One compact card system: full product artwork, a square image stage and aligned details. */
:root{--product-stage:#f0f2f5}
:root[data-theme="dark"]{--product-stage:#24272d}
.pc{border-radius:10px;min-width:0}
.pc .ptop{min-height:23px;padding:0 5px 6px;font-size:10px;line-height:17px}
.pc .media{margin:0;border-radius:10px 10px 0 0;background:var(--product-stage)}
.pc .media .art,.catalog-gift .pc .media .art{aspect-ratio:1/1;width:100%;height:auto;min-height:0;padding:12px;background:var(--product-stage)}
.pc .media .art .fgim{width:100%;height:100%;object-fit:contain;object-position:center;transform:none}
.pc .media .art .shade{display:none}
.pc:hover .media .art .fgim,.gcard:hover .art .fgim{transform:none}
/* This original Microsoft asset has a wide white border. Only the whitespace is
   compensated; the complete square product label stays inside the image stage.
   Match the asset, not the product ID, so replacing its image in admin is safe. */
.pc .media .art .fgim[src$="/real-w11p.webp"],.pc:hover .media .art .fgim[src$="/real-w11p.webp"]{transform:scale(1.95)}
.pc .pb,.grid .pc .pb{padding:12px;gap:7px}
.pc .pn,.grid .pc .pn{font-size:15px;line-height:1.4;min-height:42px;font-weight:600}
.pc .pm{font-size:12px;line-height:1.4;min-height:34px;align-content:flex-start}
.pc .pm b{line-height:1.4}
.pc .prow{padding-top:10px;gap:8px;display:flex;flex-wrap:wrap;align-items:flex-end}
.pc .price-block{flex:1 0 106px;min-width:0;max-width:100%}
.pc .ppr,.grid .pc .ppr{font-size:22px;line-height:1.2;white-space:normal;overflow-wrap:anywhere}
.pc .price-was{min-height:17px}
.pc .pold{font-size:11px}
.pc .price-off{font-size:10px}
.pc .addb,.grid .pc .addb{position:relative;flex:0 0 40px;width:40px;height:40px;margin-left:auto;padding:0}
.pc .addb::after{display:none}
.pc .wish{width:32px;height:32px;top:8px;right:8px;bottom:auto}
.pc .wish:focus-visible{opacity:1;transform:none;outline-offset:2px}
.catalog-page .grid{gap:22px 16px}
@media(min-width:1280px){.catalog-page .grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(min-width:1000px) and (max-width:1279px){.catalog-page .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(min-width:1000px){.catalog-page .catpg{grid-template-columns:240px minmax(0,1fr);gap:28px}}
/* Demo key packs occupy the same inset square as the rest of the catalogue. */
.pc .media .art.key-pack{isolation:isolate;padding:22px 18px;gap:5px;justify-content:center}
.pc .art.key-pack:after{content:'';position:absolute;inset:12px;background:#132a3d;z-index:-1;border-radius:3px}
.pc .key-pack>img{width:70%;height:29px;max-height:29px;object-fit:contain;border-radius:0}
.pc .pack-number{font-size:46px;line-height:1}
.pc .pack-name{font-size:12px;line-height:1.25;max-width:100%}
.pc .pack-note{font-size:7px;line-height:1.2;letter-spacing:.65px}
/* Keep artwork complete in the other product presentations as well. */
.catalog-page .rmedia .art{background:var(--product-stage);padding:10px}
.catalog-page .rmedia .art.key-pack{isolation:isolate}
.catalog-page .rmedia .art.key-pack:after{content:'';position:absolute;inset:10px;background:#132a3d;z-index:-1;border-radius:3px}
.catalog-page .rmedia .key-pack>img{width:70%;height:29px;max-height:29px;object-fit:contain}
.catalog-page .rmedia .art .fgim{object-fit:contain;transform:none}
.catalog-page .rmedia .art .fgim[src$="/real-w11p.webp"]{transform:scale(1.95)}
.catalog-page .rmedia .art .shade,.pdart .art .shade{display:none}
.pdart .art .fgim{object-fit:contain;transform:none}
.pdart .art .fgim[src$="/real-w11p.webp"]{transform:scale(1.95)}
.software-image{background:var(--product-stage)}
.software-image img,.software-image:hover img{object-fit:contain;transform:none}
.software-image img[src$="/real-w11p.webp"],.software-image:hover img[src$="/real-w11p.webp"]{transform:scale(1.95)}
.bundle-art{display:block;flex:0 0 40%;width:40%;aspect-ratio:1/1;align-self:center;overflow:hidden;background:var(--product-stage);border-radius:6px}
.bundle-item .bundle-art img,.bundle-item:hover .bundle-art img{display:block;width:100%;height:100%;object-fit:contain;padding:6px;border-radius:0;transform:none}
.bundle-item .bundle-art img[src$="/real-w11p.webp"],.bundle-item:hover .bundle-art img[src$="/real-w11p.webp"]{transform:scale(1.95)}
@media(min-width:600px){
 .catalog-page .prow2{grid-template-columns:152px minmax(0,1fr) 174px;min-height:212px;gap:0 20px;border-radius:10px}
 .catalog-page .rmedia{width:152px;min-width:0;min-height:0;border-radius:9px 0 0 9px}
 .catalog-page .rmedia .art{height:100%;min-height:0;aspect-ratio:auto}
 .catalog-page .rbody{padding:18px 0}
 .catalog-page .rbuy{padding:18px 18px 18px 0}
 .catalog-page .rn{font-size:18px}
 .catalog-page .rkv{font-size:13px;margin-top:9px}
 .catalog-page .rmedia .key-pack{padding:16px 10px;gap:6px}
 .catalog-page .rmedia .pack-number{font-size:42px}
 .catalog-page .rmedia .pack-name{font-size:12px}
 .catalog-page .rmedia .pack-note{font-size:7px}
}
@media(min-width:600px) and (max-width:760px){
 .catalog-page .prow2{grid-template-columns:130px minmax(0,1fr) 140px;gap:0 14px}
 .catalog-page .rmedia{width:130px}
}
@media(max-width:999px){
 .pc .addb,.grid .pc .addb{flex-basis:44px;width:44px;height:44px}
 .pc .price-block{flex-basis:92px}
}
@media(max-width:599px){
 .bundle-art{flex-basis:78px;width:78px}
 .catalog-page .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
 .pc .media .art,.catalog-gift .pc .media .art{padding:8px}
 .pc .ptop,.grid .pc .ptop{min-height:21px;padding:0 3px 5px;font-size:9px;line-height:16px}
 .pc .pb,.grid .pc .pb{padding:10px;gap:6px}
 .pc .pn,.grid .pc .pn{font-size:14px;line-height:1.35;min-height:38px}
 .pc .pm{font-size:11px;min-height:31px}
 .pc .prow{padding-top:7px;gap:6px}
 .pc .price-block{flex-basis:84px}
 .pc .ppr,.grid .pc .ppr{font-size:20px}
 .pc .pold{font-size:10px}
 .pc .price-off{font-size:9px}
 .pc .wish{width:30px;height:30px;top:6px;right:6px}
 .pc .media .art.key-pack{padding:15px 12px;gap:4px}
 .pc .art.key-pack:after{inset:8px}
 .pc .key-pack>img{height:24px;max-height:24px}
 .pc .pack-number{font-size:36px}
 .pc .pack-name{font-size:11px}
 .pc .pack-note{font-size:6px;letter-spacing:.4px}
 .catalog-page .rmedia .art{padding:6px}
 .catalog-page .rmedia .art.key-pack:after{inset:6px}
 .catalog-page .rmedia .key-pack{gap:6px}
 .catalog-page .rmedia .key-pack>img{width:90%;height:24px;object-fit:contain}
 .catalog-page .rmedia .pack-number{font-size:38px}
 .catalog-page .rmedia .pack-name,.catalog-page .rmedia .pack-note{display:none}
}
@media(max-width:359px){
 .pc .pb,.grid .pc .pb{padding:9px}
 .pc .pn,.grid .pc .pn{font-size:13px;min-height:36px}
 .pc .ppr,.grid .pc .ppr{font-size:19px}
 .pc .media .art.key-pack{padding:12px 10px;gap:3px}
 .pc .pack-number{font-size:32px}
 .pc .pack-name{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.pc:hover{transform:none}}