/* TEST — canonical catalog cover fit. Canonical visual canvases: catalog card 900x600 (3:2), PDP/master 1600x1067 (3:2). Cover images must use the frame, remain complete, and never reveal a second box. */ /* All catalog covers: remove the old oversized padding/88% constraint. object-fit:contain keeps the subject complete; the much smaller inset makes the product visually fill the card without cropping. */ .catalog-card.family-cover .catalog-card__media, .catalog-card.model-cover .catalog-card__media, .catalog-card.discipline-cover .catalog-card__media, .catalog-card.equipment-cover .catalog-card__media, .catalog-card.apparel-cover .catalog-card__media { padding: 6px !important; overflow: hidden !important; background: #0a0b0c !important; } .catalog-card.family-cover .catalog-card__media img, .catalog-card.model-cover .catalog-card__media img, .catalog-card.discipline-cover .catalog-card__media img, .catalog-card.equipment-cover .catalog-card__media img, .catalog-card.apparel-cover .catalog-card__media img { display: block !important; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: 50% 50% !important; margin: 0 !important; background: transparent !important; } /* Synced product assets already carry the SAENZ graphite stage. Feather the stage into the card so the image canvas never reads as a rectangle inside another. */ .catalog-card.family-cover .catalog-card__media, .catalog-card.model-cover .catalog-card__media, .catalog-card.equipment-cover .catalog-card__media, .catalog-card.apparel-cover .catalog-card__media { position: relative !important; } .catalog-card.family-cover .catalog-card__media::after, .catalog-card.model-cover .catalog-card__media::after, .catalog-card.equipment-cover .catalog-card__media::after, .catalog-card.apparel-cover .catalog-card__media::after { content: ""; position: absolute; z-index: 2; inset: -2px; pointer-events: none; background: radial-gradient(ellipse 84% 84% at 50% 50%, transparent 0%, transparent 64%, rgba(10,11,12,.08) 73%, rgba(10,11,12,.26) 82%, rgba(10,11,12,.60) 92%, #0a0b0c 100%); } /* Indumentaria: Remeras already use the approved contained framing. Restore Jerseys and Medias to the same contained scale so heads/socks are not cropped. Scope strictly by product href so other catalog categories are untouched. */ html.apparel-catalog .catalog-card.model-cover[href*="categoria=jerseys"] .catalog-card__media img, html.apparel-catalog .catalog-card.model-cover[href*="categoria=socks"] .catalog-card__media img { transform: scale(1.12) !important; transform-origin: center center !important; object-fit: contain !important; object-position: center center !important; } /* Pumps: their current card assets include generous internal margins, so optical enlargement is still required after the global frame correction. */ .model-cover .catalog-card__media:has(img[src*="/pumps/"]) { padding: 0 !important; } .model-cover .catalog-card__media:has(img[src*="/pumps/"]) img { transform: scale(1.18) !important; transform-origin: center center !important; } /* Long/compact pumps. */ .model-cover .catalog-card__media:has(img[src*="air-tool-switch-sport"]) img, .model-cover .catalog-card__media:has(img[src*="air-tool-mtb-mini-con-soporte"]) img, .model-cover .catalog-card__media:has(img[src*="air-tool-road-mini"]) img, .model-cover .catalog-card__media:has(img[src*="air-tool-big-bore"]) img { transform: scale(1.34) !important; } /* Air Tool Comp V2: lower the visual center slightly inside its card. */ .model-cover .catalog-card__media:has(img[src*="air-tool-comp-v2"]) img { transform: translateY(5%) scale(1.18) !important; } @media (max-width: 620px) { .catalog-card.family-cover .catalog-card__media, .catalog-card.model-cover .catalog-card__media, .catalog-card.discipline-cover .catalog-card__media, .catalog-card.equipment-cover .catalog-card__media, .catalog-card.apparel-cover .catalog-card__media { padding: 4px !important; } html.apparel-catalog .catalog-card.model-cover[href*="categoria=jerseys"] .catalog-card__media img, html.apparel-catalog .catalog-card.model-cover[href*="categoria=socks"] .catalog-card__media img { transform: scale(1.08) !important; } .model-cover .catalog-card__media:has(img[src*="/pumps/"]) img { transform: scale(1.22) !important; } .model-cover .catalog-card__media:has(img[src*="air-tool-switch-sport"]) img, .model-cover .catalog-card__media:has(img[src*="air-tool-mtb-mini-con-soporte"]) img, .model-cover .catalog-card__media:has(img[src*="air-tool-road-mini"]) img, .model-cover .catalog-card__media:has(img[src*="air-tool-big-bore"]) img { transform: scale(1.40) !important; } .model-cover .catalog-card__media:has(img[src*="air-tool-comp-v2"]) img { transform: translateY(5%) scale(1.22) !important; } } /* V1.0.3 — make the image canvas and its card read as one graphite surface. */ .catalog-card.family-cover .catalog-card__media::after, .catalog-card.model-cover .catalog-card__media::after, .catalog-card.equipment-cover .catalog-card__media::after, .catalog-card.apparel-cover .catalog-card__media::after{ inset:-1px!important; background:radial-gradient(ellipse 78% 76% at 50% 48%,transparent 0%,transparent 52%,rgba(10,11,12,.12) 64%,rgba(10,11,12,.42) 78%,rgba(10,11,12,.82) 91%,#0a0b0c 100%)!important; } /* V1.0.4 — equipment only: feather the opaque asset canvas on all four edges. */ .catalog-card.equipment-cover .catalog-card__media img, .catalog-card.equipment-model-cover .catalog-card__media img{-webkit-mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)!important;-webkit-mask-composite:source-in!important;mask-image:linear-gradient(to right,transparent 0,#000 7%,#000 93%,transparent 100%),linear-gradient(to bottom,transparent 0,#000 7%,#000 93%,transparent 100%)!important;mask-composite:intersect!important;-webkit-mask-repeat:no-repeat!important;mask-repeat:no-repeat!important;-webkit-mask-size:100% 100%!important;mask-size:100% 100%!important} /* V1.0.5 — one reliable four-edge fade for every equipment cover, including CMS covers. */ .catalog-card.equipment-cover .catalog-card__media img, .catalog-card.equipment-model-cover .catalog-card__media img{ -webkit-mask-image:radial-gradient(ellipse 96% 94% at center,#000 0%,#000 76%,rgba(0,0,0,.92) 84%,rgba(0,0,0,.55) 93%,transparent 100%)!important; mask-image:radial-gradient(ellipse 96% 94% at center,#000 0%,#000 76%,rgba(0,0,0,.92) 84%,rgba(0,0,0,.55) 93%,transparent 100%)!important; } /* V1.0.6 — remove the duplicated frame from equipment catalog media only. */ .catalog-card.equipment-cover, .catalog-card.equipment-model-cover, .catalog-card.equipment-cover .catalog-card__media, .catalog-card.equipment-model-cover .catalog-card__media{ border-color:transparent!important; } /* V1.0.7 — every category detail grid needs breathing room below the sticky header. `equipment-minimal` is applied by catalogo.html to category detail routes. */ html.equipment-minimal .catalog-grid{ margin-top:26px!important; } html.equipment-minimal .catalog-card__media{ align-items:center!important; justify-content:center!important; } html.equipment-minimal .catalog-card__media img{ object-position:50% 50%!important; } @media(max-width:620px){ html.equipment-minimal .catalog-grid{margin-top:20px!important} } /* V1.0.8 — canonical equipment/apparel card geometry and soft frame. */ html.catalog-media-pending .catalog-grid{visibility:hidden!important} html.equipment-minimal .catalog-grid, html.apparel-catalog .catalog-grid{align-items:stretch!important;grid-auto-rows:1fr!important} html.equipment-minimal .catalog-card, html.apparel-catalog .catalog-card{ display:grid!important; grid-template-rows:250px minmax(66px,auto)!important; height:100%!important; min-height:316px!important; overflow:hidden!important; border:1px solid rgba(255,255,255,.13)!important; border-radius:15px!important; background:#0a0b0c!important; transform:none!important; } html.equipment-minimal .catalog-card:hover, html.apparel-catalog .catalog-card:hover{border-color:rgba(255,255,255,.22)!important;transform:none!important} html.equipment-minimal .catalog-card__media, html.apparel-catalog .catalog-card__media{ grid-row:1!important; width:100%!important; height:250px!important; min-height:250px!important; padding:18px!important; display:flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; background:#0a0b0c!important; } html.equipment-minimal .catalog-card__media img, html.apparel-catalog .catalog-card__media img, html.apparel-catalog .catalog-card.apparel-cover .catalog-card__media img, html.apparel-catalog .catalog-card.model-cover .catalog-card__media img{ display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; object-fit:contain!important; object-position:50% 50%!important; transform:none!important; margin:0!important; } html.equipment-minimal .catalog-card__body, html.apparel-catalog .catalog-card__body{ grid-row:2!important; min-height:66px!important; padding:15px 20px 18px!important; display:flex!important; align-items:center!important; background:#0a0b0c!important; } html.equipment-minimal .catalog-card__body h2, html.apparel-catalog .catalog-card__body h2{margin:0!important} @media(max-width:620px){ html.equipment-minimal .catalog-card, html.apparel-catalog .catalog-card{grid-template-rows:220px minmax(62px,auto)!important;min-height:282px!important;border-radius:13px!important} html.equipment-minimal .catalog-card__media, html.apparel-catalog .catalog-card__media{height:220px!important;min-height:220px!important;padding:14px!important} html.equipment-minimal .catalog-card__body, html.apparel-catalog .catalog-card__body{min-height:62px!important;padding:14px 17px 16px!important} } /* V1.0.9 — Bicycle family/model cards use one deterministic Rockhopper geometry. This intentionally overrides the generic cover rule above. The approved Rockhopper family card is the reference: 280px card, media begins ~52px from the top, 54px is reserved for the title strip, and the subject stays at 82%. The same geometry applies to