/*   UPPER MIDDLE    */


#main-upr > article.u-mid > span.sellers {
  width: 100%; 
  height: 40px; 
  background-color: #FF9900; 
  display: flex; 
  flex-direction: row; 
  justify-content: space-between; 
  padding-left: 30px; 
  padding-right: 30px; 
  margin: 0;
    
    
  /* 1. Unvisited link */
  & a:link {color: black; }
  /* 2. Visited link */
  & a:visited {color: purple;}
  /* 3. Mouse hover */
  & a:hover {color: blue;}
  /* 4. Active (moment of click) */
  & a:active {color: orange;}
}

#main-upr > article.u-mid >iframe.cosmicscroll {margin-left: 15px; margin-right: auto;}

#main-upr > article.u-mid > span.sellers a {text-decoration: none; font-size: 1.25em;  font-variant: small-caps}

#main-upr > article.u-mid {padding: 0; padding-left: 2%; padding-right: 2%; background:#f5f3f1!important; }

#main-upr > article.u-mid > img {max-width: 100%; height: auto; margin:0; border-radius: 35px; padding:0; margin-left: auto; margin-right: auto !important;}

/* 1. Register the custom property so CSS knows it's an angle */
@property --angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* 2. The Wrapper */
.image-border-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  width: fit-content;
  margin: 0 auto;
  padding: 3px; 
  border-radius: 35px;
  
  /* Use the --angle variable inside the conic-gradient */
  background: conic-gradient(from var(--angle), blue, #FFFFFF, red, #000000FF);
  
  /* Animate the --angle property, not the background */
  animation: rotateBorder 4s linear infinite;
  overflow: hidden;
}

/* 3. The Image */
#main-upr > article.u-mid > 
.image-border-wrapper img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 29px; 
  margin: 0;
  display: block;
  position: relative;
}

/* 4. The Animation Keyframes */
@keyframes rotateBorder {
  to {
    --angle: 360deg; /* Smoothly transitions from 0deg to 360deg */
  }
}