@font-face { font-family:'ASA Condensed'; src:url('/fonts/barlow-condensed.ttf') format('truetype'); font-weight:100 900; font-display:swap; }
.asa-product-awards { position:absolute; inset:0; pointer-events:none; --asa-ribbon:#c0a575; --asa-line:#927a50; --asa-label:#f3dfb9; font-family:'ASA Condensed',var(--font-display,'Arial Narrow'),sans-serif; }
.asa-product-awards--silver { --asa-ribbon:#bcc1c1; --asa-line:#899090; --asa-label:#e4e8e8; }
.asa-product-awards--bronze { --asa-ribbon:#c4997a; --asa-line:#936a4c; --asa-label:#efd4c0; }
.asa-product-awards--score { --asa-ribbon:#d4d2cb; --asa-line:#9c9a92; --asa-label:#eceae4; }
.asa-product-awards img.asa-product-medal { position:absolute; top:18px; left:18px; display:block; width:66px; height:66px; object-fit:contain; border:0; transform:none; }
.asa-product-awards .asa-product-ribbon { position:absolute; top:0; right:18px; display:flex; flex-direction:column; align-items:center; box-sizing:border-box; width:86px; height:116px; padding:7px 6px 18px; background:var(--asa-ribbon); color:#0b1118; clip-path:polygon(0 0,100% 0,100% 100%,50% 88%,0 100%); text-align:center; }
.asa-product-ribbon::after { content:''; position:absolute; inset:4px; border:1px solid var(--asa-line); border-bottom:0; pointer-events:none; }
.asa-product-ribbon .asa-product-ribbon-label { display:block; width:100%; padding:5px 0; background:#111; color:var(--asa-label); font-size:14px; font-weight:500; line-height:1.15; letter-spacing:.05em; text-transform:uppercase; }
.asa-product-ribbon strong { font-family:inherit; font-size:31px; font-weight:600; line-height:1; font-variant-numeric:tabular-nums; margin:9px 0 3px; }
.asa-product-ribbon .asa-product-ribbon-unit { color:#0b1118; font-size:8px; font-weight:500; line-height:1.3; letter-spacing:.12em; text-transform:uppercase; }
@media (max-width:600px) { .asa-product-awards .asa-product-ribbon { right:16px; } .asa-product-awards img.asa-product-medal { width:60px; height:60px; left:16px; } }



/* Award details sit beside the photographs; no overlay is used here. */
.product{min-width:0;align-items:start}
.product-info{min-width:0;align-self:center}
.product>.product-info>h3{overflow-wrap:normal}
.product .asa-product-awards{position:static;inset:auto;display:flex;align-items:center;gap:10px;margin-top:18px;min-height:92px}
.product .asa-product-awards img.asa-product-medal{position:static;inset:auto;width:52px;height:52px;aspect-ratio:1;object-fit:contain;flex-shrink:0}
.product .asa-product-awards .asa-product-ribbon{position:relative;inset:auto;flex-shrink:0;width:68px;height:92px;padding:6px 5px 14px}
.product .asa-product-ribbon .asa-product-ribbon-label{font-size:12px;padding:4px 0;letter-spacing:.04em}
.product .asa-product-ribbon strong{font-size:28px;margin:7px 0 2px}
.product .asa-product-ribbon .asa-product-ribbon-unit{font-size:7px}
.product .asa-product-ribbon::after{inset:3px}
.awards-results-link{display:inline-flex;margin-top:32px;gap:20px;align-items:center}
@media(min-width:761px) and (max-width:1100px){.products{grid-template-columns:1fr 1fr;gap:24px 32px}.product{gap:20px}}
@media(max-width:760px){.product .asa-product-awards{margin-top:16px}.product>img{aspect-ratio:1;object-fit:cover}}