/* 20FIT logo on product covers. It rests in a bottom corner (left or right, chosen per photo in the
   catalog) and glides to the top while the card is hovered, like a caption. Only transform/width animate.
   Markup: ShopGallery.coverLogo() in the shop pages, the same string in index.html / centr.html.

   .cover-logo     the logo's path: inset from the cover's edges, shortened at the bottom by the logo's height
   .cover-logo-m   moves along that path (translateY(-100%) = its own height = the whole path)
   .cover-logo-in  the logo, hanging just below the mover, so at rest it sits in the bottom corner */
.cover-logo{
  --cl-edge:3.6%;
  --cl-h:calc(4.7% + 7px);               /* logo (37% of the path width, 640x86) + red line */
  position:absolute;z-index:2;
  left:var(--cl-edge);right:var(--cl-edge);top:var(--cl-edge);bottom:calc(var(--cl-edge) + var(--cl-h));
  pointer-events:none
}
.cover-logo.is-left{top:calc(var(--cl-edge) + var(--cl-badge, 0px))}
.cd .cover-logo,.rc .cover-logo{--cl-badge:22px}   /* cards with a label top-left (stock, category): the logo stops below it */
.cover-logo-m{position:absolute;inset:0;transition:transform .45s cubic-bezier(.22,.8,.24,1)}
.cover-logo-in{position:absolute;top:100%;width:37%}
.is-right .cover-logo-in{right:0}
.is-left .cover-logo-in{left:0}
.cover-logo img{display:block;width:100%;height:auto;opacity:.9}
.cover-logo i{display:block;width:22px;height:2px;margin-top:5px;background:#e4002b;transition:width .45s cubic-bezier(.22,.8,.24,1)}
.is-right .cover-logo i{margin-left:auto}

@media (hover:hover){
  .cd:hover .cover-logo-m,
  .rc:hover .cover-logo-m,
  .shop-relc:hover .cover-logo-m,
  .shop-pdimg:hover .cover-logo-m{transform:translateY(-100%)}
  .cd:hover .cover-logo i,
  .rc:hover .cover-logo i,
  .shop-relc:hover .cover-logo i,
  .shop-pdimg:hover .cover-logo i{width:34px}
}
@media (prefers-reduced-motion:reduce){
  .cover-logo-m,.cover-logo i{transition:none}
}